1 files changed, 208 insertions, 57 deletions

diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 2ed6dfbe7c2..faedd207e01 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -8,20 +8,25 @@ $active-color: $indigo-700;
 $active-hover-background: $active-background;
 $active-hover-color: $gl-text-color;
 $inactive-badge-background: rgba(0, 0, 0, .08);
-$hover-background: $indigo-700;
-$hover-color: $white-light;
+$hover-background: $white-light;
+$hover-color: $gl-text-color;
 $inactive-color: $gl-text-color-secondary;
 $new-sidebar-width: 220px;
+$new-sidebar-collapsed-width: 50px;
 
 .page-with-new-sidebar {
-  @media (min-width: $screen-sm-min) {
+  @media (min-width: $screen-md-min) {
+    padding-left: $new-sidebar-collapsed-width;
+  }
+
+  @media (min-width: $screen-lg-min) {
     padding-left: $new-sidebar-width;
   }
 
   // Override position: absolute
   .right-sidebar {
     position: fixed;
-    height: 100%;
+    height: calc(100% - #{$header-height});
   }
 
   .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
@@ -29,8 +34,15 @@ $new-sidebar-width: 220px;
   }
 }
 
+.page-with-icon-sidebar {
+  @media (min-width: $screen-sm-min) {
+    padding-left: $new-sidebar-collapsed-width;
+  }
+}
+
 .context-header {
   position: relative;
+  margin-right: 2px;
 
   a {
     border-bottom: 1px solid $border-color;
@@ -39,26 +51,16 @@ $new-sidebar-width: 220px;
     align-items: center;
     padding: 10px 16px 10px 10px;
     color: $gl-text-color;
+  }
 
-    @media (max-width: $screen-xs-max) {
-      padding-right: 30px;
-    }
-
-    &:hover {
-      background-color: $hover-background;
-      color: $hover-color;
-      border-color: $hover-background;
-
-      .avatar-container {
-        border-color: transparent;
-      }
-
-      .settings-avatar {
-        background-color: $indigo-500;
+  &:hover,
+  a:hover {
+    background-color: $hover-background;
+    color: $hover-color;
 
-        i {
-          color: $hover-color;
-        }
+    .settings-avatar {
+      i {
+        color: $hover-color;
       }
     }
   }
@@ -73,32 +75,6 @@ $new-sidebar-width: 220px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-
-  &:hover {
-    .close-nav-button {
-      color: $white-light;
-    }
-  }
-
-  .close-nav-button {
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    background-color: transparent;
-    border: 0;
-    padding: 0 10px;
-
-    @media (max-width: $screen-xs-max) {
-      display: block;
-    }
-
-    &:hover {
-      color: $gl-text-color;
-    }
-  }
 }
 
 .settings-avatar {
@@ -125,6 +101,20 @@ $new-sidebar-width: 220px;
   background-color: $gray-normal;
   box-shadow: inset -2px 0 0 $border-color;
 
+  &.sidebar-icons-only {
+    width: $new-sidebar-collapsed-width;
+    overflow-x: hidden;
+
+    .badge,
+    .project-title {
+      display: none;
+    }
+
+    .nav-item-name {
+      opacity: 0;
+    }
+  }
+
   &.nav-sidebar-expanded {
     left: 0;
   }
@@ -196,7 +186,7 @@ $new-sidebar-width: 220px;
 
   > li {
     a {
-      padding: 8px 16px 8px 50px;
+      padding: 8px 16px 8px 40px;
 
       &:hover,
       &:focus {
@@ -219,7 +209,77 @@ $new-sidebar-width: 220px;
 }
 
 .sidebar-top-level-items {
+  margin-bottom: 60px;
+
   > li {
+    > a {
+      @media (min-width: $screen-sm-min) {
+        margin-right: 2px;
+      }
+
+      &:hover {
+        color: $gl-text-color;
+
+        svg {
+          fill: $gl-text-color;
+        }
+      }
+    }
+
+    &.is-showing-fly-out {
+      > a {
+        margin-right: 2px;
+      }
+
+      .sidebar-sub-level-items {
+        @media (min-width: $screen-sm-min) {
+          position: fixed;
+          top: 0;
+          left: $new-sidebar-width;
+          min-width: 150px;
+          margin-top: -1px;
+          padding: 8px 1px;
+          background-color: $white-light;
+          box-shadow: 2px 1px 3px $dropdown-shadow-color;
+          border: 1px solid $gray-darker;
+          border-left: 0;
+          border-radius: 0 3px 3px 0;
+
+          &::before {
+            content: "";
+            position: absolute;
+            top: -30px;
+            bottom: -30px;
+            left: -10px;
+            right: -30px;
+            z-index: -1;
+          }
+
+          &.is-above {
+            margin-top: 1px;
+          }
+
+          > .active {
+            box-shadow: none;
+
+            > a {
+              background-color: transparent;
+            }
+          }
+
+          a {
+            padding: 8px 16px;
+            color: $gl-text-color;
+
+            &:hover,
+            &:focus {
+              background-color: $gray-darker;
+            }
+          }
+        }
+      }
+    }
+
     .badge {
       background-color: $inactive-badge-background;
       color: $inactive-color;
@@ -228,6 +288,11 @@ $new-sidebar-width: 220px;
     &.active {
       background: $active-background;
 
+      > a {
+        margin-left: 4px;
+        padding-left: 12px;
+      }
+
       .badge {
         color: $active-color;
         font-weight: 600;
@@ -238,20 +303,100 @@ $new-sidebar-width: 220px;
       }
     }
 
-    > a:hover {
-      background-color: $hover-background;
-      color: $hover-color;
+    &.active > a:hover,
+    &.is-over > a {
+      background-color: $white-light;
+    }
+  }
+}
+
+
+// Collapsed nav
+
+.toggle-sidebar-button,
+.close-nav-button {
+  width: $new-sidebar-width - 2px;
+  position: fixed;
+  bottom: 0;
+  padding: 16px;
+  background-color: $gray-normal;
+  border: 0;
+  border-top: 2px solid $border-color;
+  color: $gl-text-color-secondary;
+  display: flex;
+  align-items: center;
+
+  i {
+    font-size: 20px;
+    margin-right: 8px;
+  }
+
+  .fa-angle-double-right {
+    display: none;
+  }
+
+  &:hover {
+    background-color: $border-color;
+    color: $gl-text-color;
+  }
+}
+
+.toggle-sidebar-button {
+  @media (max-width: $screen-xs-max) {
+    display: none;
+  }
+}
+
+
+.sidebar-icons-only {
+  .context-header {
+    height: 61px;
+
+    a {
+      padding: 10px 4px;
+    }
+  }
+
+  li a {
+    padding: 12px 15px;
+  }
+
+  .sidebar-top-level-items > li {
+    &.active a {
+      padding-left: 12px;
+    }
 
-      svg {
-        fill: $hover-color;
+    .sidebar-sub-level-items {
+      @media (min-width: $screen-sm-min) {
+        left: $new-sidebar-collapsed-width;
       }
 
-      .badge {
-        background-color: $indigo-500;
-        color: $hover-color;
+      &:not(.flyout-list) {
+        display: none;
       }
     }
   }
+
+  .toggle-sidebar-button {
+    width: $new-sidebar-collapsed-width - 2px;
+    padding: 16px 18px;
+
+    .collapse-text,
+    .fa-angle-double-left {
+      display: none;
+    }
+
+    .fa-angle-double-right {
+      display: block;
+    }
+  }
+}
+
+
+// Mobile nav
+
+.close-nav-button {
+  display: none;
 }
 
 .toggle-mobile-nav {
@@ -273,6 +418,12 @@ $new-sidebar-width: 220px;
   }
 }
 
+@media (max-width: $screen-xs-max) {
+  .close-nav-button {
+    display: flex;
+  }
+}
+
 .mobile-overlay {
   display: none;