diff options
author | Ezekiel Kigbo <ekigbo@gitlab.com> | 2019-02-07 10:22:11 +0300 |
---|---|---|
committer | Ezekiel Kigbo <ekigbo@gitlab.com> | 2019-03-04 16:58:22 +0300 |
commit | 9ef058bee2b13b975cc52d9c9c688c6250ad2363 (patch) | |
tree | b993ca82c610f05074645f3330aba25683f84d81 /app/assets/javascripts/contextual_sidebar.js | |
parent | 1622e86301bfc91118f21c6f849f51886b36da66 (diff) |
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
Diffstat (limited to 'app/assets/javascripts/contextual_sidebar.js')
-rw-r--r-- | app/assets/javascripts/contextual_sidebar.js | 23 |
1 files changed, 9 insertions, 14 deletions
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js index f59d953c2f1..a9013025bad 100644 --- a/app/assets/javascripts/contextual_sidebar.js +++ b/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); |