1 files changed, 36 insertions, 5 deletions
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 88486a12379..3d202183c82 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -118,7 +118,7 @@ $new-sidebar-width: 220px;
   z-index: 400;
   width: $new-sidebar-width;
   transition: left $sidebar-transition-duration;
-  top: 50px;
+  top: $header-height;
   bottom: 0;
   left: 0;
   overflow: auto;
@@ -143,10 +143,19 @@ $new-sidebar-width: 220px;
     white-space: nowrap;
 
     a {
-      display: block;
+      display: flex;
+      align-items: center;
       padding: 12px 16px;
       color: $inactive-color;
     }
+
+    svg {
+      fill: $inactive-color;
+    }
+  }
+
+  .nav-item-name {
+    flex: 1;
   }
 
   li.active {
@@ -156,11 +165,29 @@ $new-sidebar-width: 220px;
       color: $active-color;
       font-weight: 700;
     }
+
+    svg {
+      fill: $active-color;
+    }
   }
 
   @media (max-width: $screen-xs-max) {
     left: (-$new-sidebar-width);
   }
+
+  .nav-icon-container {
+    display: flex;
+    margin-right: 8px;
+
+    svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
+}
+
+.with-performance-bar .nav-sidebar {
+  top: $header-height + $performance-bar-height;
 }
 
 .sidebar-sub-level-items {
@@ -169,7 +196,7 @@ $new-sidebar-width: 220px;
 
   > li {
     a {
-      padding: 8px 16px 8px 24px;
+      padding: 8px 16px 8px 50px;
 
       &:hover,
       &:focus {
@@ -257,6 +284,7 @@ $new-sidebar-width: 220px;
           }
 
           a {
+            padding: 8px 16px;
             color: $gl-text-color;
 
             &:hover,
@@ -269,7 +297,6 @@ $new-sidebar-width: 220px;
     }
 
     .badge {
-      float: right;
       background-color: $inactive-badge-background;
       color: $inactive-color;
     }
@@ -335,7 +362,7 @@ $new-sidebar-width: 220px;
 // Make issue boards full-height now that sub-nav is gone
 
 .boards-list {
-  height: calc(100vh - 50px);
+  height: calc(100vh - #{$header-height});
 
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
@@ -345,6 +372,10 @@ $new-sidebar-width: 220px;
   }
 }
 
+.with-performance-bar .boards-list {
+  height: calc(100vh - #{$header-height} - #{$performance-bar-height});
+}
+
 
 // Change color of all horizontal tabs to match the new indigo color
 .nav-links li.active a {