From cba743c895187ff338f95bc0943741773399aaed Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Tue, 3 Jan 2017 17:56:30 +0900
Subject: [PATCH] modify: fix sidenav style for folded mode

---
 browser/components/SideNavFilter.js   |  7 +++++--
 browser/components/SideNavFilter.styl | 26 ++++++++++++++++++++++++++
 browser/main/SideNav/index.js         |  1 +
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js
index 4d92e1c7..6d8db96a 100644
--- a/browser/components/SideNavFilter.js
+++ b/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,
diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl
index 8dceaeab..10567f0b 100644
--- a/browser/components/SideNavFilter.styl
+++ b/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()
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 425a3655..c0fe0fd2 100644
--- a/browser/main/SideNav/index.js
+++ b/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}