From ff4b96b62282182386188daf6883edbaa223203b Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Tue, 10 Oct 2017 00:31:26 +0900
Subject: [PATCH] implement tagItem active styleName

---
 browser/components/TagListItem.js   |  5 +++--
 browser/components/TagListItem.styl | 13 ++++++++++++-
 browser/main/SideNav/index.js       |  3 ++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index df405d48..e522c1e6 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -8,10 +8,11 @@ import CSSModules from 'browser/lib/CSSModules'
 /**
 * @param {string} name
 * @param {Function} handleClickTagListItem
+* @param {bool} isActive
 */
 
-const TagListItem = ({name, handleClickTagListItem}) => (
-  <button styleName='tagList-item' onClick={() => handleClickTagListItem(name)}>
+const TagListItem = ({name, handleClickTagListItem, isActive}) => (
+  <button styleName={isActive? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
     <span styleName='tagList-item-name'>
       {`# ${name}`}
     </span>
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index 4e89b094..e3ee4f10 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -20,6 +20,18 @@
     color $ui-text-color
     background-color $ui-button--active-backgroundColor
 
+.tagList-item-active
+  background-color $ui-button--active-backgroundColor
+  display flex
+  width 100%
+  height 26px
+  padding 0
+  margin-bottom 5px
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 12px
+
 .tagList-item-name
   display block
   flex 1
@@ -31,4 +43,3 @@
   border-color transparent
   overflow hidden
   text-overflow ellipsis
-
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 05f668e4..f9253ec3 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -95,7 +95,7 @@ class SideNav extends React.Component {
   }
 
   tagListComponent () {
-    const { data } = this.props
+    const { data, location } = this.props
     let tagList = data.tagNoteMap.map((tag, key) => {
       return key
     })
@@ -104,6 +104,7 @@ class SideNav extends React.Component {
         <TagListItem
           name={tag}
           handleClickTagListItem={this.handleClickTagListItem.bind(this)}
+          isActive={!!location.pathname.match(tag)}
           key={tag}
         />
       ))