foldable sidebar

Author: Rokt33r

browser/main/SideNav/SideNav.styl

@@ -100,23 +100,24 @@
     width 44px - 1
     text-align center
     &:hover .menu-button-label
-      width 100px
+      opacity 1
   // TODO: extract tooltip style to a mixin
   .menu-button-label
     position fixed
     display inline-block
-    height 34px
+    height 30px
     left 44px
-    width 0
-    padding-left 0
-    margin-top -9px
+    padding 0 10px
+    margin-top -7px
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
     z-index 10
     color white
     line-height 34px
-    border-top-right-radius 5px
-    border-bottom-right-radius 5px
-    transition width 0.15s
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+    transition opacity 0.15s
     pointer-events none
+    opacity 0
+    font-size 12px

browser/main/SideNav/StorageItem.js

@@ -31,7 +31,7 @@ class StorageItem extends React.Component {
   }
 
   render () {
-    let { storage, location } = this.props
+    let { storage, location, isFolded } = this.props
     let folderList = storage.folders.map((folder) => {
       let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key))
       return <button styleName={isActive
@@ -44,15 +44,20 @@ class StorageItem extends React.Component {
         <span styleName='folderList-item-name'
           style={{borderColor: folder.color}}
         >
-          {folder.name}
+          {isFolded ? folder.name.substring(0, 1) : folder.name}
         </span>
+        {isFolded &&
+          <span styleName='folderList-item-tooltip'>
+            {folder.name}
+          </span>
+        }
       </button>
     })
 
     let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
 
     return (
-      <div styleName='root'
+      <div styleName={isFolded ? 'root--folded' : 'root'}
         key={storage.key}
       >
         <div styleName={isActive
@@ -72,11 +77,19 @@ class StorageItem extends React.Component {
             onClick={(e) => this.handleHeaderInfoClick(e)}
           >
             <span styleName='header-info-name'>
-              {storage.name}
+              {isFolded ? storage.name.substring(0, 1) : storage.name}
             </span>
             <span styleName='header-info-path'>
               ({storage.path})
             </span>
+            {isFolded &&
+              <span styleName='header-info--folded-tooltip'>
+                {storage.name}
+                <span styleName='header-info--folded-tooltip-path'>
+                  ({storage.path})
+                </span>
+              </span>
+            }
           </button>
         </div>
         {this.state.isOpen &&
@@ -90,6 +103,7 @@ class StorageItem extends React.Component {
 }
 
 StorageItem.propTypes = {
+  isFolded: PropTypes.bool
 }
 
 export default CSSModules(StorageItem, styles)

browser/main/SideNav/StorageItem.styl

@@ -55,7 +55,6 @@
 .header-info-path
   font-size 10px
   margin 0 5px
-
 .folderList-item
   display block
   width 100%
@@ -67,6 +66,8 @@
   text-align left
   border none
   font-size 14px
+  &:first-child
+    margin-top 0
   &:hover
     background-color $ui-button--hover-backgroundColor
   &:active
@@ -84,6 +85,50 @@
   padding 0 10px
   height 30px
   line-height 30px
-  border-width 0 0 0 4px
+  border-width 0 0 0 6px
   border-style solid
   border-color transparent
+.folderList-item-tooltip
+  tooltip()
+  position fixed
+  padding 0 10px
+  left 44px
+  z-index 10
+  pointer-events none
+  opacity 0
+  border-top-right-radius 2px
+  border-bottom-right-radius 2px
+  height 30px
+  margin-top -30px
+  line-height 30px
+.root--folded
+  @extend .root
+  .header
+    width 100%
+  .header-info
+    overflow ellipsis
+    padding 0 0 0 18px
+    &:hover .header-info--folded-tooltip
+      opacity 1
+  .header-info-path
+    display none
+  .header-toggleButton
+    width 15px
+  .header-info--folded-tooltip
+    tooltip()
+    position fixed
+    padding 0 10px
+    left 44px
+    z-index 10
+    pointer-events none
+    opacity 0
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+  .header-info--folded-tooltip-path
+    font-size 10px
+    margin 0 5px
+  .folderList-item:hover, .folderList-item--active:hover
+    .folderList-item-tooltip
+      opacity 1
+  .folderList-item-name
+    padding-left 14px

browser/main/SideNav/index.js

@@ -46,6 +46,7 @@ class SideNav extends React.Component {
         key={storage.key}
         storage={storage}
         location={location}
+        isFolded={isFolded}
       />
     })
 
@@ -83,16 +84,14 @@ class SideNav extends React.Component {
             <div styleName='storageList-empty'>No storage mount.</div>
           )}
         </div>
-        {false &&
-          <button styleName='navToggle'
-            onClick={(e) => this.handleToggleButtonClick(e)}
-          >
-            {isFolded
-              ? <i className='fa fa-angle-double-right'/>
-              : <i className='fa fa-angle-double-left'/>
-            }
-          </button>
-        }
+        <button styleName='navToggle'
+          onClick={(e) => this.handleToggleButtonClick(e)}
+        >
+          {isFolded
+            ? <i className='fa fa-angle-double-right'/>
+            : <i className='fa fa-angle-double-left'/>
+          }
+        </button>
       </div>
     )
   }

browser/main/TopBar/TopBar.styl

@@ -1,9 +1,9 @@
 .root
   position relative
-  width 100%
   background-color $ui-backgroundColor
   height $topBar-height - 1
-
+.root--expanded
+  @extend .root
 $control-height = 34px
 
 .control