cut out NavToggle component

browser/components/NavToggleButton.js

@@ -0,0 +1,29 @@
+/**
+* @fileoverview Micro component for toggle SideNav
+*/
+import React, { PropTypes } from 'react'
+import styles from './NavToggleButton.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+/**
+* @param {boolean} isFolded
+* @param {Function} handleToggleButtonClick
+*/
+
+const NavToggleButton = ({isFolded, handleToggleButtonClick}) => (
+  <button styleName='navToggle'
+    onClick={(e) => handleToggleButtonClick(e)}
+  >
+    {isFolded
+     ? <i className='fa fa-angle-double-right' />
+     : <i className='fa fa-angle-double-left' />
+    }
+  </button>
+)
+
+NavToggleButton.propTypes = {
+  isFolded: PropTypes.bool.isRequired,
+  handleToggleButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(NavToggleButton, styles)

browser/components/NavToggleButton.styl

@@ -0,0 +1,19 @@
+.navToggle
+  navButtonColor()
+  display block
+  position absolute
+  right 5px
+  bottom 5px
+  border-radius 16.5px
+  height 34px
+  width 34px
+  line-height 32px
+  padding 0
+
+body[data-theme="dark"]
+  .navToggle
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color
+

browser/main/SideNav/SideNav.styl

@@ -37,18 +37,6 @@
   top 80px
   overflow-y auto
 
-.navToggle
-  navButtonColor()
-  display block
-  position absolute
-  right 5px
-  bottom 5px
-  border-radius 16.5px
-  height 34px
-  width 34px
-  line-height 32px
-  padding 0
-
 .root--folded
   @extend .root
   width 44px
@@ -116,9 +104,3 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-
-  .navToggle
-    &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      transition 0.15s
-      color $ui-dark-text-color

browser/main/SideNav/index.js

@@ -8,6 +8,7 @@ import StorageItem from './StorageItem'
 import TagListItem from 'browser/components/TagListItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
 import StorageList from 'browser/components/StorageList'
+import NavToggleButton from 'browser/components/NavToggleButton'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -69,14 +70,7 @@ class SideNav extends React.Component {
           />
 
           <StorageList storageList={storageList} />
-          <button styleName='navToggle'
+          <NavToggleButton isFolded={isFolded} handleToggleButtonClick={this.handleToggleButtonClick.bind(this)} />
-            onClick={(e) => this.handleToggleButtonClick(e)}
-          >
-            {isFolded
-              ? <i className='fa fa-angle-double-right' />
-              : <i className='fa fa-angle-double-left' />
-            }
-          </button>
         </div>
       )
     } else {