1 files changed, 32 insertions, 20 deletions

diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js
index 50efecb3475..67fcdd082a2 100644
--- a/app/assets/javascripts/contextual_sidebar.js
+++ b/app/assets/javascripts/contextual_sidebar.js
@@ -4,6 +4,10 @@ import _ from 'underscore';
 import bp from './breakpoints';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
+// NOTE: at 1200px nav sidebar should not overlap the content
+// https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/24555#note_134136110
+const NAV_SIDEBAR_BREAKPOINT = 1200;
+
 export default class ContextualSidebar {
   constructor() {
     this.initDomElements();
@@ -26,44 +30,54 @@ export default class ContextualSidebar {
   bindEvents() {
     if (!this.$sidebar.length) return;
 
-    document.addEventListener('click', e => {
-      if (
-        !e.target.closest('.nav-sidebar') &&
-        (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')
-      ) {
-        this.toggleCollapsedSidebar(true, true);
-      }
-    });
     this.$openSidebar.on('click', () => this.toggleSidebarNav(true));
     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);
+      if (!ContextualSidebar.isDesktopBreakpoint()) {
+        this.toggleSidebarNav(!this.$sidebar.hasClass('sidebar-expanded-mobile'));
+      } else {
+        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 documentation: https://design.gitlab.com/regions/navigation#contextual-navigation
+  static isDesktopBreakpoint = () => bp.windowWidth() >= NAV_SIDEBAR_BREAKPOINT;
   static setCollapsedCookie(value) {
-    if (bp.getBreakpointSize() !== 'lg') {
+    if (!ContextualSidebar.isDesktopBreakpoint()) {
       return;
     }
     Cookies.set('sidebar_collapsed', value, { expires: 365 * 10 });
   }
 
   toggleSidebarNav(show) {
-    this.$sidebar.toggleClass('sidebar-expanded-mobile', show);
-    this.$overlay.toggleClass('mobile-nav-open', show);
+    const breakpoint = bp.getBreakpointSize();
+    const dbp = ContextualSidebar.isDesktopBreakpoint();
+
+    this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false);
+    this.$overlay.toggleClass(
+      'mobile-nav-open',
+      breakpoint === 'xs' || breakpoint === 'sm' ? show : false,
+    );
     this.$sidebar.removeClass('sidebar-collapsed-desktop');
   }
 
   toggleCollapsedSidebar(collapsed, saveCookie) {
     const breakpoint = bp.getBreakpointSize();
+    const dbp = ContextualSidebar.isDesktopBreakpoint();
 
     if (this.$sidebar.length) {
       this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed);
-      this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
+      this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false);
+      this.$page.toggleClass(
+        'page-with-icon-sidebar',
+        breakpoint === 'xs' || breakpoint === 'sm' ? true : collapsed,
+      );
     }
 
     if (saveCookie) {
@@ -84,13 +98,11 @@ export default class ContextualSidebar {
   render() {
     if (!this.$sidebar.length) return;
 
-    const breakpoint = bp.getBreakpointSize();
-
-    if (breakpoint === 'sm' || breakpoint === 'md') {
-      this.toggleCollapsedSidebar(true, false);
-    } else if (breakpoint === 'lg') {
+    if (!ContextualSidebar.isDesktopBreakpoint()) {
+      this.toggleSidebarNav(false);
+    } else {
       const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
-      this.toggleCollapsedSidebar(collapse, false);
+      this.toggleCollapsedSidebar(collapse, true);
     }
   }
 }