Merge pull request #999 from BoostIO/fix-sideNav-style

Fix side nav style

browser/components/SideNavFilter.styl

@@ -102,4 +102,4 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 50%)
       color $ui-favorite-star-button-color
       .menu-button-label
-        color $ui-dark-text-color
+        color $ui-dark-text-color

browser/main/SideNav/SideNav.styl

@@ -15,7 +15,8 @@
   navButtonColor()
   position absolute
   top 22px
-  right 5px
+  left 200px
+  height 23px
   &:hover
     color $ui-text-color
   &:active, &:active:hover
@@ -49,6 +50,7 @@
 .top-menu-label
   margin-left 5px
   overflow ellipsis
+  opacity 0
 
 .tabBody
   flex 1
@@ -65,6 +67,40 @@
   overflow-y auto
   flex: 1
 
+.root--folded
+  height 100vh
+  width $sideNav--folded-width
+  .switch-buttons
+    display none
+  .top
+    height 60px
+  .top-menu
+    position static
+    width $sideNav--folded-width
+    height 60px
+    text-align center
+    &:hover .top-menu-label
+      transition opacity 0.15s
+      opacity 1
+  .top-menu-label
+    position fixed
+    display inline-block
+    height 30px
+    left $sideNav--folded-width
+    padding 0 10px
+    margin-top -8px
+    opacity 0
+    margin-left 0
+    overflow hidden
+    background-color $ui-tooltip-backgroundColor
+    z-index 10
+    color white
+    line-height 30px
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+    pointer-events none
+    font-size 12px
+
 body[data-theme="dark"]
   .root, .root--folded
     border-color $ui-dark-borderColor

browser/main/SideNav/index.js

@@ -150,6 +150,7 @@ class SideNav extends React.Component {
               onClick={(e) => this.handleMenuButtonClick(e)}
             >
               <i className='fa fa-wrench fa-fw' />
+              <span styleName='top-menu-label'>Preferences</span>
             </button>
           </div>
         </div>