From 59e5c547e9c3afaf3d005f436c2d93febe1f120c Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 17:51:41 +0900
Subject: [PATCH] fix button style to change color when switch active/inactive

---
 browser/main/SideNav/SideNav.styl | 15 ++++++++++++---
 browser/main/SideNav/index.js     | 11 ++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 752b85cc..a71015c5 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -13,14 +13,23 @@
   height $topBar-height
   padding 0 15px
   font-size 12px
-  width 100%
-  text-align left
+  width 33%
+  text-align center
   &:hover
     color $ui-text-color
   &:active, &:active:hover
     color $ui-text-color
     background-color alpha($ui-button--active-backgroundColor, 20%)
 
+.switch-buttons button
+  width 33%
+
+.active-button
+  background-color #c4c4c4
+
+.non-active-button
+  background-color white
+
 .top-menu-label
   margin-left 5px
   overflow ellipsis
@@ -127,4 +136,4 @@ body[data-theme="dark"]
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       transition 0.15s
-      color $ui-dark-text-color
\ No newline at end of file
+      color $ui-dark-text-color
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index ae149cf4..4130f286 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -40,13 +40,11 @@ class SideNav extends React.Component {
   }
 
   handleSwitchFolderButtonClick (e) {
-    console.log('SwitchfolderButton Clicked')
     let { router } = this.context
     router.push('/home')
   }
 
   handleSwitchTagButtonClick (e) {
-    console.log('SwitchTagButton clicked')
     let { router } = this.context
     router.push('/alltags')
   }
@@ -138,16 +136,15 @@ class SideNav extends React.Component {
         tabIndex='1'
         style={style}
       >
-        <div styleName='SwitchModeButtons'>
-          <button onClick={(e) => this.handleSwitchFolderButtonClick(e)}>Folder</button>
-          <button onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tags</button>
-        </div>
         <div styleName='top'>
+          <div styleName='switch-buttons'>
+            <button styleName={location.pathname.match(/tag/) ? 'non-active-button' : 'active-button'} onClick={(e) => this.handleSwitchFolderButtonClick(e)}>Folder</button>
+            <button styleName={location.pathname.match(/tag/) ? 'active-button' : 'non-active-button'} onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tags</button>
+          </div>
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
             <i className='fa fa-wrench fa-fw' />
-            <span styleName='top-menu-label'>Preferences</span>
           </button>
         </div>
         {this.SideNavComponent(isFolded, isHomeActive, isTrashedActive, isStarredActive, storageList)}