update sidebar style

add transition
modify margin among menu buttons

browser/main/HomePage/SideNav/FolderItem.js

@@ -59,6 +59,10 @@ class FolderItem extends React.Component {
     }
 
     var menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'New Note'
+    }))
+    menu.append(new MenuItem({ type: 'separator' }))
     menu.append(new MenuItem({
       label: 'Rename',
       click: () => this.handleRenameButtonClick(e)

browser/main/HomePage/SideNav/FolderItem.styl

@@ -3,6 +3,7 @@
   width 100%
   position relative
   cursor pointer
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
     .control
@@ -28,6 +29,7 @@
   bottom 0
   right 5px
   width 24px
+  transition 0.15s
 
 .control-button
   width 24px
@@ -37,6 +39,7 @@
   border-radius 5px
   background-color transparent
   color $nav-inactive-text-color
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active

browser/main/HomePage/SideNav/RepositorySection.styl

@@ -1,6 +1,4 @@
 .root
-  margin-top 15px
-  margin-bottom 15px
   user-select none
   color $nav-text-color
 
@@ -9,6 +7,7 @@
   height 33px
   cursor pointer
   color $nav-inactive-text-color
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
     .header-control-button
@@ -40,6 +39,7 @@
   background-color transparent
   color $nav-inactive-text-color
   opacity 0
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
@@ -75,6 +75,7 @@
   text-align left
   color $nav-inactive-text-color
   background-color transparent
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active

browser/main/HomePage/SideNav/SideNav.styl

@@ -19,6 +19,7 @@
   border none
   color $nav-inactive-text-color
   background-color transparent
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
@@ -37,6 +38,7 @@
   border none
   color $nav-inactive-text-color
   background-color transparent
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
@@ -52,7 +54,7 @@
 
 .repositoryList
   absolute left right bottom
-  top 167px
+  top 178px
   overflow-y auto
 
 .repositoryList-empty
@@ -69,30 +71,13 @@
   border-radius 16.5px
   height 33px
   width 33px
-  color $nav-inactive-color
+  color $nav-inactive-text-color
   border none
   background-color transparent
+  transition 0.15s
   &:hover
-    background-color alpha(white, 0.1)
-    color white
+    background-color $nav-hover-background
+    color $nav-inactive-text-color
   &:active
-    background-color $brand-color
-    color white
-
-.control
-  absolute bottom left right
-  height 33px
-  background-color transparent
-  border none
-  &:hover
-    background-color alph(white, 0.1)
-  &:active
-    background-color $brand-color
-
-.control-newRepositoryButton
-  absolute top bottom left
-  width 167px
-  padding 0 10px
-  text-align left
-  border none
-  color white
+    background-color $nav-active-background
+    color $nav-text-color