diff options
| author | Luke Bennett <lukeeeebennettplus@gmail.com> | 2019-03-11 21:19:34 +0300 |
|---|---|---|
| committer | Luke Bennett <lbennett@gitlab.com> | 2019-05-15 17:41:00 +0300 |
| commit | 0705acd66c58c09322f54875f33868414d8a8639 (patch) | |
| tree | 7e467d54a609f73f5ac22715d08270f2fe636619 /app | |
| parent | b02fca968445e0828fc76bec689ab3d4f3755e07 (diff) | |
Fix flyout nav on small viewports
Decouples sidebar collapsed style from
behavior.
Diffstat (limited to 'app')
| -rw-r--r-- | app/assets/javascripts/contextual_sidebar.js | 3 | ||||
| -rw-r--r-- | app/assets/javascripts/fly_out_nav.js | 3 |
2 files changed, 5 insertions, 1 deletions
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js index 03dea1ec0a5..b62ec8a651b 100644 --- a/app/assets/javascripts/contextual_sidebar.js +++ b/app/assets/javascripts/contextual_sidebar.js @@ -8,6 +8,8 @@ import { parseBoolean } from '~/lib/utils/common_utils'; // 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(); @@ -62,6 +64,7 @@ export default class ContextualSidebar { 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', diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js index 2b6af9060d1..2566ed6b47c 100644 --- a/app/assets/javascripts/fly_out_nav.js +++ b/app/assets/javascripts/fly_out_nav.js @@ -1,4 +1,5 @@ import bp from './breakpoints'; +import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar'; const HIDE_INTERVAL_TIMEOUT = 300; const IS_OVER_CLASS = 'is-over'; @@ -29,7 +30,7 @@ const setHeaderHeight = () => { }; export const isSidebarCollapsed = () => - sidebar && sidebar.classList.contains('sidebar-collapsed-desktop'); + sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS); export const canShowActiveSubItems = el => { if (el.classList.contains('active') && !isSidebarCollapsed()) { |