Fix flyout nav on small viewports
Decouples sidebar collapsed style from behavior.
This commit is contained in:
parent
b02fca9684
commit
0705acd66c
|
@ -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',
|
||||
|
|
|
@ -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()) {
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Fix flyout nav on small viewports
|
||||
merge_request: 25998
|
||||
author:
|
||||
type: fixed
|
|
@ -14,6 +14,7 @@ import {
|
|||
setSidebar,
|
||||
subItemsMouseLeave,
|
||||
} from '~/fly_out_nav';
|
||||
import { SIDEBAR_COLLAPSED_CLASS } from '~/contextual_sidebar';
|
||||
import bp from '~/breakpoints';
|
||||
|
||||
describe('Fly out sidebar navigation', () => {
|
||||
|
@ -219,7 +220,7 @@ describe('Fly out sidebar navigation', () => {
|
|||
it('shows collapsed only sub-items if icon only sidebar', () => {
|
||||
const subItems = el.querySelector('.sidebar-sub-level-items');
|
||||
const sidebar = document.createElement('div');
|
||||
sidebar.classList.add('sidebar-collapsed-desktop');
|
||||
sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
|
||||
subItems.classList.add('is-fly-out-only');
|
||||
|
||||
setSidebar(sidebar);
|
||||
|
@ -296,7 +297,7 @@ describe('Fly out sidebar navigation', () => {
|
|||
|
||||
it('returns true when active & collapsed sidebar', () => {
|
||||
const sidebar = document.createElement('div');
|
||||
sidebar.classList.add('sidebar-collapsed-desktop');
|
||||
sidebar.classList.add(SIDEBAR_COLLAPSED_CLASS);
|
||||
el.classList.add('active');
|
||||
|
||||
setSidebar(sidebar);
|
||||
|
|
Loading…
Reference in New Issue