Fixed navigation sidebar flashing open on page load

Adds the sidebar-collapsed-mobile class to the haml layouts
and sets media queries to display the sidebar collapsed by
default for sreen sizes greater than `sm` and less than `lg`

8 files changed, 59 insertions, 14 deletions

diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js
index 50efecb3475..eb30d14b6cd 100644
--- a/app/assets/javascripts/contextual_sidebar.js
+++ b/app/assets/javascripts/contextual_sidebar.js
@@ -29,7 +29,7 @@ export default class ContextualSidebar {
     document.addEventListener('click', e => {
       if (
         !e.target.closest('.nav-sidebar') &&
-        (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')
+        !ContextualSidebar.isDesktopBreakpoint(bp.getBreakpointSize())
       ) {
         this.toggleCollapsedSidebar(true, true);
       }
@@ -38,13 +38,23 @@ export default class ContextualSidebar {
     this.$closeSidebar.on('click', () => this.toggleSidebarNav(false));
     this.$overlay.on('click', () => this.toggleSidebarNav(false));
     this.$sidebarToggle.on('click', () => {
-      const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
-      this.toggleCollapsedSidebar(value, true);
+      const breakpoint = bp.getBreakpointSize();
+
+      if (!ContextualSidebar.isDesktopBreakpoint(breakpoint)) {
+        const collapsed = !this.$sidebar.hasClass('sidebar-collapsed-mobile');
+        this.toggleMobileCollapsedSidebar(collapsed);
+      } else if (breakpoint === 'lg') {
+        const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
+        this.toggleCollapsedSidebar(value, true);
+      }
     });
 
     $(window).on('resize', () => _.debounce(this.render(), 100));
   }
 
+  // TODO: use the breakpoints from breakpoints.js once they have been updated for bootstrap 4
+  // See related issue and discussion: https://gitlab.com/gitlab-org/gitlab-ce/issues/56745
+  static isDesktopBreakpoint = (_bp = '') => ['xl', 'lg'].indexOf(_bp) > -1;
   static setCollapsedCookie(value) {
     if (bp.getBreakpointSize() !== 'lg') {
       return;
@@ -58,12 +68,21 @@ export default class ContextualSidebar {
     this.$sidebar.removeClass('sidebar-collapsed-desktop');
   }
 
+  toggleMobileCollapsedSidebar(collapsed) {
+    this.$sidebar.toggleClass('sidebar-collapsed-mobile', collapsed);
+    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());
+  }
+
   toggleCollapsedSidebar(collapsed, saveCookie) {
     const breakpoint = bp.getBreakpointSize();
 
     if (this.$sidebar.length) {
       this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed);
       this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
+      this.$page.toggleClass('page-with-contextual-sidebar', true);
     }
 
     if (saveCookie) {
@@ -86,8 +105,8 @@ export default class ContextualSidebar {
 
     const breakpoint = bp.getBreakpointSize();
 
-    if (breakpoint === 'sm' || breakpoint === 'md') {
-      this.toggleCollapsedSidebar(true, false);
+    if (!ContextualSidebar.isDesktopBreakpoint(breakpoint)) {
+      this.toggleMobileCollapsedSidebar(true);
     } else if (breakpoint === 'lg') {
       const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
       this.toggleCollapsedSidebar(collapse, false);
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 8b6a7017c47..cf25213cf2e 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -1,11 +1,11 @@
 .page-with-contextual-sidebar {
   transition: padding-left $sidebar-transition-duration;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(sm) {
     padding-left: $contextual-sidebar-collapsed-width;
   }
 
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(xl) {
     padding-left: $contextual-sidebar-width;
   }
 
@@ -89,7 +89,7 @@
     }
   }
 
-  &.sidebar-collapsed-desktop {
+  @mixin collapse-contextual-sidebar {
     width: $contextual-sidebar-collapsed-width;
 
     .nav-sidebar-inner-scroll {
@@ -115,6 +115,17 @@
     }
   }
 
+  &.sidebar-collapsed-desktop {
+    @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;
   }
@@ -357,7 +368,7 @@
   overflow: hidden;
 }
 
-.sidebar-collapsed-desktop {
+@mixin collapse-contextual-sidebar-content {
   .context-header {
     height: 60px;
     width: $contextual-sidebar-collapsed-width;
@@ -395,6 +406,16 @@
   }
 }
 
+.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;
diff --git a/app/views/layouts/nav/sidebar/_admin.html.haml b/app/views/layouts/nav/sidebar/_admin.html.haml
index 2fdd65f639b..c4903dfe30b 100644
--- a/app/views/layouts/nav/sidebar/_admin.html.haml
+++ b/app/views/layouts/nav/sidebar/_admin.html.haml
@@ -1,4 +1,4 @@
-.nav-sidebar.qa-admin-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar.qa-admin-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to admin_root_path, title: _('Admin Overview') do
diff --git a/app/views/layouts/nav/sidebar/_group.html.haml b/app/views/layouts/nav/sidebar/_group.html.haml
index 21ea9f3b2f3..3adbe8b1d3d 100644
--- a/app/views/layouts/nav/sidebar/_group.html.haml
+++ b/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{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to group_path(@group), title: @group.name do
diff --git a/app/views/layouts/nav/sidebar/_instance_statistics.html.haml b/app/views/layouts/nav/sidebar/_instance_statistics.html.haml
index 57180f27146..e28b1f08099 100644
--- a/app/views/layouts/nav/sidebar/_instance_statistics.html.haml
+++ b/app/views/layouts/nav/sidebar/_instance_statistics.html.haml
@@ -1,4 +1,4 @@
-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to instance_statistics_root_path, title: _('Instance Statistics') do
diff --git a/app/views/layouts/nav/sidebar/_profile.html.haml b/app/views/layouts/nav/sidebar/_profile.html.haml
index 1e3bb8f1224..ed3d6d18077 100644
--- a/app/views/layouts/nav/sidebar/_profile.html.haml
+++ b/app/views/layouts/nav/sidebar/_profile.html.haml
@@ -1,4 +1,4 @@
-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     .context-header
       = link_to profile_path, title: _('Profile Settings') do
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index 7b492efeb09..5e2638a2428 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -1,4 +1,4 @@
-.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
+.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
   .nav-sidebar-inner-scroll
     - can_edit = can?(current_user, :admin_project, @project)
     .context-header
diff --git a/changelogs/unreleased/fix-38010-sidebar-loads-and-collapses.yml b/changelogs/unreleased/fix-38010-sidebar-loads-and-collapses.yml
new file mode 100644
index 00000000000..af80a069fde
--- /dev/null
+++ b/changelogs/unreleased/fix-38010-sidebar-loads-and-collapses.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed navigation sidebar flashing open on page load 
+merge_request: 24555
+author:
+type: fixed