renew SideNav

browser/main/HomePage/SideNav/SideNav.styl

@@ -1,18 +1,16 @@
-$nav-border-color = #838383
-$nav-background-color = #353535
-
 .root
   absolute top bottom left
   width 200px
   border-right solid 1px $nav-border-color
   background-color $nav-background-color
+  user-select none
 
-.menu
-  margin-top 30px
-  margin-bottom 15px
+.top
+  height 60px
+  border-bottom solid 1px $nav-border-color
 
-.menu-button
-  height 33px
+.top-menu
+  height 60px
   padding 0 10px
   font-size 14px
   width 100%
@@ -21,39 +19,60 @@ $nav-background-color = #353535
   color white
   background-color transparent
   &:hover
-    background-color alph(white, 0.1)
+    background-color alpha(white, 0.1)
+  &:active
+    background-color $brand-color
+
+.menu
+  margin-top 15px
+
+.menu-button
+  height 44px
+  padding 0 10px
+  font-size 14px
+  width 100%
+  text-align left
+  border none
+  color white
+  background-color transparent
+  &:hover
+    background-color alpha(white, 0.1)
   &:active
     background-color $brand-color
 
 .repositoryList
   absolute left right
-  top 145px
-  border-top solid 1px $nav-border-color
+  top 167px
+  bottom 33px
+  overflow-y auto
+
+.repositoryList-empty
+  padding 0 10px
+  height 44px
+  line-height 44px
+  color $nav-inactive-color
+
+.navToggle
+  display block
+  position absolute
+  right 5px
+  bottom 5px
+  border-radius 16.5px
+  height 33px
+  width 33px
+  color $nav-inactive-color
+  border none
+  background-color transparent
+  &:hover
+    background-color alpha(white, 0.1)
+    color white
+  &:active
+    background-color $brand-color
+    color white
 
 .control
   absolute bottom left right
   height 33px
-  border-top solid 1px $nav-border-color
-
-.control-newRepositoryButton
-  absolute top bottom left
-  width 167px
-  padding 0 10px
-  text-align left
-  border-width 0 1px 0 0
-  border-color $nav-border-color
-  border-style solid
-  color white
-  background-color transparent
-  &:hover
-    background-color alph(white, 0.1)
-  &:active
-    background-color $brand-color
-
-.control-toggleButton
-  absolute top bottom right
-  width 33px
-  color white
   background-color transparent
   border none
   &:hover
@@ -61,3 +80,10 @@ $nav-background-color = #353535
   &:active
     background-color $brand-color
 
+.control-newRepositoryButton
+  absolute top bottom left
+  width 167px
+  padding 0 10px
+  text-align left
+  border none
+  color white