Navigating by notelist

browser/main/NoteList/NoteList.styl

@@ -5,18 +5,33 @@
   overflow auto
 
 .item
+  position relative
   height 80px
   border-bottom $ui-border
   padding 0 5px
   user-select none
   cursor pointer
+  transition background-color 0.15s
   &:hover
     background-color alpha(black, 5%)
 
+.item--active
+  @extend .item
+  .item-border
+    border-color $ui-active-color
+
+.item-border
+  absolute top bottom left right
+  border-style solid
+  border-width 2px
+  border-color transparent
+  transition 0.15s
+
 .item-info
   height 30px
   clearfix()
   font-size 12px
+  color $ui-inactive-text-color
   line-height 30px
 
 .item-info-left
@@ -28,6 +43,7 @@
 .item-title
   height 20px
   line-height 20px
+  padding 0 5px
   font-weight bold
   overflow ellipsis
 
@@ -35,3 +51,4 @@
   height 30px
   font-size 12px
   line-height 30px
+  color $ui-inactive-text-color

browser/main/NoteList/index.js

@@ -161,11 +161,20 @@ class NoteList extends React.Component {
 
   handleNoteClick (key) {
     return (e) => {
-      console.log(key)
+      let { router } = this.context
+      let { location } = this.props
+
+      router.push({
+        pathname: location.pathname,
+        query: {
+          key: key
+        }
+      })
     }
   }
 
   render () {
+    let { location } = this.props
     let notes = this.getNotes()
     let noteElements = notes.map((note) => {
       let folder = _.find(note._repository.folders, {key: note.folder})
@@ -173,12 +182,16 @@ class NoteList extends React.Component {
         return <span key='tag'>{tag}</span>
       })
       let key = `${note._repository.key}/${note.key}`
-
+      let isActive = location.query.key === key
       return (
-        <div styleName='item'
+        <div styleName={isActive
+            ? 'item--active'
+            : 'item'
+          }
           key={key}
           onClick={(e) => this.handleNoteClick(key)(e)}
         >
+          <div styleName='item-border'/>
           <div styleName='item-info'>
 
             <div styleName='item-info-left'>

browser/styles/index.styl

@@ -15,6 +15,7 @@ $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
 $ui-backgroundColor = #FAFAFA
 $ui-border = solid 1px $ui-borderColor
+$ui-active-color = #6AA5E9
 
 // UI Button
 $ui-button-color = #939395