resizible list

browser/main/SideNav/FolderItem.styl

@@ -86,6 +86,7 @@
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px

browser/main/SideNav/RepositorySection.js

@@ -158,7 +158,7 @@ class RepositorySection extends React.Component {
           onContextMenu={(e) => this.handleContextButtonClick(e)}
         >
           <div styleName='header-name'>
-            <i styleName='header-name-icon' className='fa fa-archive fa-fw'/>
+            <i className='fa fa-archive fa-fw'/>
             <span styleName='header-name-label'>{repository.name}</span>
           </div>
 

browser/main/SideNav/RepositorySection.styl

@@ -10,10 +10,12 @@
   text-align left
   font-size 14px
   color $ui-inactive-text-color
+  &:hover
+    background-color $ui-button--hover-backgroundColor
   &:hover .header-control-button
     opacity 1
   &:active
-    background-color $ui-button--active-backgroundColor !important
+    background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
     .header-control-button, .header-control-button--show
       color white
@@ -22,6 +24,8 @@
   @extend .header
   background-color $ui-button--active-backgroundColor
   color $ui-button--active-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
   .header-control-button,
   .header-control-button--show
     color white
@@ -124,6 +128,7 @@
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -136,6 +141,7 @@
     height 33px
     top inherit
     bottom inherit
+    z-index 11
     left 43px
     box-sizing border-box
     overflow hidden
@@ -164,6 +170,7 @@
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px

browser/main/SideNav/SideNav.styl

@@ -1,8 +1,9 @@
 .root
   absolute top left
-  bottom $statusBar-height
+  bottom $statusBar-height - 1
   width $sideNav-width
   border-right $ui-border
+  border-bottom $ui-border
   background-color $ui-backgroundColor
   user-select none
   color $ui-text-color
@@ -88,6 +89,7 @@
     margin-left 0
     overflow hidden
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -99,6 +101,7 @@
     text-align center
     &:hover .menu-button-label
       width 100px
+  // TODO: extract tooltip style to a mixin
   .menu-button-label
     position fixed
     display inline-block
@@ -110,6 +113,7 @@
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px

browser/main/SideNav/index.js

@@ -74,8 +74,7 @@ class SideNav extends React.Component {
       })
 
     return (
-      <div
-        className='SideNav'
+      <div className='SideNav'
         styleName={isFolded ? 'root-folded' : 'root'}
         tabIndex='1'
       >
@@ -83,7 +82,7 @@ class SideNav extends React.Component {
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
-            <i styleName='top-menu-icon' className='fa fa-navicon fa-fw'/>
+            <i className='fa fa-navicon fa-fw'/>
             <span styleName='top-menu-label'>Menu</span>
           </button>
         </div>
@@ -92,17 +91,13 @@ class SideNav extends React.Component {
           <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
             onClick={(e) => this.handleHomeButtonClick(e)}
           >
-            <i styleName='menu-button-icon'
-              className='fa fa-home fa-fw'
-            />
+            <i className='fa fa-home fa-fw'/>
             <span styleName='menu-button-label'>Home</span>
           </button>
           <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
             onClick={(e) => this.handleStarredButtonClick(e)}
           >
-            <i styleName='menu-button-icon'
-              className='fa fa-star fa-fw'
-            />
+            <i className='fa fa-star fa-fw'/>
             <span styleName='menu-button-label'>Starred</span>
           </button>
         </div>
@@ -132,7 +127,13 @@ SideNav.contextTypes = {
 
 SideNav.propTypes = {
   dispatch: PropTypes.func,
-  repositories: PropTypes.array
+  repositories: PropTypes.array,
+  config: PropTypes.shape({
+    isSideNavFolded: PropTypes.bool
+  }),
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  })
 }
 
 export default CSSModules(SideNav, styles)