implement tagItem active styleName

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}) => (
+const TagListItem = ({name, handleClickTagListItem, isActive}) => (
-  <button styleName='tagList-item' onClick={() => handleClickTagListItem(name)}>
+  <button styleName={isActive? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
     <span styleName='tagList-item-name'>
       {`# ${name}`}
     </span>

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
-

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}
         />
       ))