diff options
Diffstat (limited to 'app/assets/javascripts/contextual_sidebar.js')
-rw-r--r-- | app/assets/javascripts/contextual_sidebar.js | 58 |
1 files changed, 38 insertions, 20 deletions
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js index 50efecb3475..b62ec8a651b 100644 --- a/app/assets/javascripts/contextual_sidebar.js +++ b/app/assets/javascripts/contextual_sidebar.js @@ -4,6 +4,12 @@ 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 const SIDEBAR_COLLAPSED_CLASS = 'js-sidebar-collapsed'; + export default class ContextualSidebar { constructor() { this.initDomElements(); @@ -26,44 +32,58 @@ 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); + } + }); + this.$page.on('transitionstart transitionend', () => { + $(document).trigger('content.resize'); }); $(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_COLLAPSED_CLASS, !show); + 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 +104,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); } } } |