Updated nav-sidebar to collapse on load

Adds the collapsed mixin to the styling for .nav-sidebar
ensuring the nav-sidebar is collapsed on load via media
queries. Removes the need for an intermediate class to
collapse the sidebar on mobile viewports

Updated toggleCollapsedSidebar to check for desktop breakpoint

app/assets/javascripts/contextual_sidebar.js

@@ -42,8 +42,7 @@ export default class ContextualSidebar {
       const breakpoint = bp.getBreakpointSize();
 
       if (!ContextualSidebar.isDesktopBreakpoint(breakpoint)) {
-        const collapsed = !this.$sidebar.hasClass('sidebar-collapsed-mobile');
-        this.toggleMobileCollapsedSidebar(collapsed);
+        this.toggleSidebarNav(!this.$sidebar.hasClass('sidebar-expanded-mobile'));
       } else if (breakpoint === 'lg') {
         const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
         this.toggleCollapsedSidebar(value, true);
@@ -64,25 +63,22 @@ export default class ContextualSidebar {
   }
 
   toggleSidebarNav(show) {
-    this.$sidebar.toggleClass('sidebar-expanded-mobile', show);
-    this.$overlay.toggleClass('mobile-nav-open', show);
-    this.$sidebar.removeClass('sidebar-collapsed-desktop');
-  }
+    const breakpoint = bp.getBreakpointSize();
+    const dbp = ContextualSidebar.isDesktopBreakpoint(breakpoint);
 
-  toggleMobileCollapsedSidebar(collapsed) {
-    this.$sidebar.toggleClass('sidebar-collapsed-mobile', collapsed);
-    this.$sidebar.toggleClass('sidebar-expanded-mobile', !collapsed);
+    this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false);
+    this.$overlay.toggleClass('mobile-nav-open', breakpoint === 'xs' ? show : false);
     this.$sidebar.removeClass('sidebar-collapsed-desktop');
-    this.$page.toggleClass('page-with-icon-sidebar', true);
-    this.$page.toggleClass('page-with-contextual-sidebar', false);
-    requestIdleCallback(() => this.toggleSidebarOverflow());
+    this.$page.toggleClass('page-with-contextual-sidebar', true);
   }
 
   toggleCollapsedSidebar(collapsed, saveCookie) {
     const breakpoint = bp.getBreakpointSize();
+    const dbp = ContextualSidebar.isDesktopBreakpoint(breakpoint);
 
     if (this.$sidebar.length) {
       this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed);
+      this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false);
       this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
       this.$page.toggleClass('page-with-contextual-sidebar', true);
     }
@@ -106,9 +102,8 @@ export default class ContextualSidebar {
     if (!this.$sidebar.length) return;
 
     const breakpoint = bp.getBreakpointSize();
-
     if (!ContextualSidebar.isDesktopBreakpoint(breakpoint)) {
-      this.toggleMobileCollapsedSidebar(true);
+      this.toggleSidebarNav(false);
     } else if (breakpoint === 'lg') {
       const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
       this.toggleCollapsedSidebar(collapse, false);

app/assets/stylesheets/framework/contextual_sidebar.scss

@@ -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;
@@ -119,13 +157,6 @@
     @include collapse-contextual-sidebar;
   }
 
-  &.sidebar-collapsed-mobile {
-    // md = 768, xl = 1200px
-    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, xl)) {
-      @include collapse-contextual-sidebar;
-    }
-  }
-
   &.sidebar-expanded-mobile {
     left: 0;
   }
@@ -178,6 +209,13 @@
     height: 16px;
     width: 16px;
   }
+
+  &:not(.sidebar-expanded-mobile) {
+    @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, xl)) {
+      @include collapse-contextual-sidebar;
+      @include collapse-contextual-sidebar-content;
+    }
+  }
 }
 
 .nav-sidebar-inner-scroll {
@@ -368,54 +406,10 @@
   overflow: hidden;
 }
 
-@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;
-    }
-  }
-}
-
 .sidebar-collapsed-desktop {
   @include collapse-contextual-sidebar-content;
 }
 
-.sidebar-collapsed-mobile {
-  @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, xl)) {
-    @include collapse-contextual-sidebar-content;
-  }
-}
-
 .fly-out-top-item {
   > a {
     display: flex;

app/views/layouts/nav/sidebar/_admin.html.haml

@@ -1,4 +1,4 @@
-.nav-sidebar.qa-admin-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar.qa-admin-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to admin_root_path, title: _('Admin Overview') do

app/views/layouts/nav/sidebar/_group.html.haml

@@ -2,7 +2,7 @@
 - merge_requests_count = group_merge_requests_count(state: 'opened')
 - issues_sub_menu_items = ['groups#issues', 'labels#index', 'milestones#index', 'boards#index', 'boards#show']
 
-.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to group_path(@group), title: @group.name do

app/views/layouts/nav/sidebar/_instance_statistics.html.haml

@@ -1,4 +1,4 @@
-.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to instance_statistics_root_path, title: _('Instance Statistics') do

app/views/layouts/nav/sidebar/_profile.html.haml

@@ -1,4 +1,4 @@
-.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do

app/views/layouts/nav/sidebar/_project.html.haml

@@ -1,4 +1,4 @@
-.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     - can_edit = can?(current_user, :admin_project, @project)
     .context-header

spec/support/shared_examples/views/nav_sidebar.rb

@@ -4,6 +4,8 @@ shared_examples 'has nav sidebar' do
   it 'has collapsed nav sidebar on mobile' do
     render
 
-    expect(rendered).to have_selector('.nav-sidebar.sidebar-collapsed-mobile')
+    expect(rendered).to have_selector('.nav-sidebar')
+    expect(rendered).not_to have_selector('.sidebar-collapsed-desktop')
+    expect(rendered).not_to have_selector('.sidebar-expanded-mobile')
   end
 end