modify: fix sidenav style for folded mode

browser/components/SideNavFilter.js

@@ -6,6 +6,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNavFilter.styl'
 
 /**
+ * @param {boolean} isFolded
  * @param {boolean} isHomeActive
  * @param {Function} handleAllNotesButtonClick
  * @param {boolean} isStarredActive
@@ -13,9 +14,10 @@ import styles from './SideNavFilter.styl'
  * @return {React.Component}
  */
 const SideNavFilter = ({
-  isHomeActive, handleAllNotesButtonClick, isStarredActive, handleStarredButtonClick
+  isFolded, isHomeActive, handleAllNotesButtonClick,
+  isStarredActive, handleStarredButtonClick
 }) => (
-  <div styleName='menu'>
+  <div styleName={ isFolded ? 'menu--folded' : 'menu' }>
     <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleAllNotesButtonClick}
     >
@@ -32,6 +34,7 @@ const SideNavFilter = ({
 )
 
 SideNavFilter.propTypes = {
+  isFolded: PropTypes.bool,
   isHomeActive: PropTypes.bool.isRequired,
   handleAllNotesButtonClick: PropTypes.func.isRequired,
   isStarredActive: PropTypes.bool.isRequired,

browser/components/SideNavFilter.styl

@@ -20,6 +20,32 @@
 .menu-button-label
   margin-left 5px
 
+.menu--folded
+  @extend .menu
+  .menu-button, .menu-button--active
+    text-align center
+    &:hover .menu-button-label
+      transition opacity 0.15s
+      opacity 1
+  .menu-button-label
+    position fixed
+    display inline-block
+    height 32px
+    left 44px
+    padding 0 10px
+    margin-top -8px
+    margin-left 0
+    overflow ellipsis
+    background-color $ui-tooltip-backgroundColor
+    z-index 10
+    color white
+    line-height 32px
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+    pointer-events none
+    opacity 0
+    font-size 12px
+
 body[data-theme="dark"]
   .menu-button
     navDarkButtonColor()

browser/main/SideNav/index.js

@@ -71,6 +71,7 @@ class SideNav extends React.Component {
         </div>
 
         <SideNavFilter
+          isFolded={isFolded}
           isHomeActive={isHomeActive}
           handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
           isStarredActive={isStarredActive}