1 files changed, 70 insertions, 63 deletions

diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 8b6a7017c47..3238b01c6c0 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -5,7 +5,7 @@
     padding-left: $contextual-sidebar-collapsed-width;
   }
 
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     padding-left: $contextual-sidebar-width;
   }
 
@@ -15,7 +15,7 @@
 }
 
 .page-with-icon-sidebar {
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(md) {
     padding-left: $contextual-sidebar-collapsed-width;
   }
 }
@@ -71,6 +71,44 @@
   }
 }
 
+@mixin collapse-contextual-sidebar-content {
+  .context-header {
+    height: 60px;
+    width: $contextual-sidebar-collapsed-width;
+
+    a {
+      padding: 10px 4px;
+    }
+  }
+
+  .sidebar-top-level-items > li {
+    .sidebar-sub-level-items {
+      &:not(.flyout-list) {
+        display: none;
+      }
+    }
+  }
+
+  .nav-icon-container {
+    margin-right: 0;
+  }
+
+  .toggle-sidebar-button {
+    padding: 16px;
+    width: $contextual-sidebar-collapsed-width - 1px;
+
+    .collapse-text,
+    .icon-angle-double-left {
+      display: none;
+    }
+
+    .icon-angle-double-right {
+      display: block;
+      margin: 0;
+    }
+  }
+}
+
 .nav-sidebar {
   transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
   position: fixed;
@@ -89,7 +127,7 @@
     }
   }
 
-  &.sidebar-collapsed-desktop {
+  @mixin collapse-contextual-sidebar {
     width: $contextual-sidebar-collapsed-width;
 
     .nav-sidebar-inner-scroll {
@@ -115,6 +153,10 @@
     }
   }
 
+  &.sidebar-collapsed-desktop {
+    @include collapse-contextual-sidebar;
+  }
+
   &.sidebar-expanded-mobile {
     left: 0;
   }
@@ -150,7 +192,7 @@
     }
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     left: (-$contextual-sidebar-width);
   }
 
@@ -167,16 +209,19 @@
     height: 16px;
     width: 16px;
   }
+
+  @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
+    &:not(.sidebar-expanded-mobile) {
+      @include collapse-contextual-sidebar;
+      @include collapse-contextual-sidebar-content;
+    }
+  }
 }
 
 .nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
   overflow: auto;
-
-  @include media-breakpoint-up(sm) {
-    overflow: hidden;
-  }
 }
 
 .with-performance-bar .nav-sidebar {
@@ -346,53 +391,13 @@
   }
 }
 
-.toggle-sidebar-button {
-  @include media-breakpoint-down(xs) {
-    display: none;
-  }
-}
-
 .collapse-text {
   white-space: nowrap;
   overflow: hidden;
 }
 
 .sidebar-collapsed-desktop {
-  .context-header {
-    height: 60px;
-    width: $contextual-sidebar-collapsed-width;
-
-    a {
-      padding: 10px 4px;
-    }
-  }
-
-  .sidebar-top-level-items > li {
-    .sidebar-sub-level-items {
-      &:not(.flyout-list) {
-        display: none;
-      }
-    }
-  }
-
-  .nav-icon-container {
-    margin-right: 0;
-  }
-
-  .toggle-sidebar-button {
-    padding: 16px;
-    width: $contextual-sidebar-collapsed-width - 1px;
-
-    .collapse-text,
-    .icon-angle-double-left {
-      display: none;
-    }
-
-    .icon-angle-double-right {
-      display: block;
-      margin: 0;
-    }
-  }
+  @include collapse-contextual-sidebar-content;
 }
 
 .fly-out-top-item {
@@ -428,16 +433,14 @@
     color: $gl-text-color-secondary;
   }
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     display: flex;
     align-items: center;
 
     i {
       font-size: 18px;
     }
-  }
 
-  @include media-breakpoint-down(xs) {
     + .breadcrumbs-links {
       padding-left: $gl-padding;
       border-left: 1px solid $gl-text-color-quaternary;
@@ -445,21 +448,25 @@
   }
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .close-nav-button {
     display: flex;
   }
-}
 
-.mobile-overlay {
-  display: none;
+  .toggle-sidebar-button {
+    display: none;
+  }
 
-  &.mobile-nav-open {
-    display: block;
-    position: fixed;
-    background-color: $black-transparent;
-    height: 100%;
-    width: 100%;
-    z-index: 300;
+  .mobile-overlay {
+    display: none;
+
+    &.mobile-nav-open {
+      display: block;
+      position: fixed;
+      background-color: $black-transparent;
+      height: 100%;
+      width: 100%;
+      z-index: 300;
+    }
   }
 }