Commit 55a1c6b5 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'tz-improve-navigation-initialisation' into 'master'

Optimization of setup of Main Nav Layout, Contextual Sidebar and Fly Out Nav

Closes #56257

See merge request gitlab-org/gitlab-ce!24362
parents 8b4b7cae 8871dc90
......@@ -13,6 +13,9 @@ export default class ContextualSidebar {
initDomElements() {
this.$page = $('.layout-page');
this.$sidebar = $('.nav-sidebar');
if (!this.$sidebar.length) return;
this.$innerScroll = $('.nav-sidebar-inner-scroll', this.$sidebar);
this.$overlay = $('.mobile-overlay');
this.$openSidebar = $('.toggle-mobile-nav');
......@@ -21,12 +24,14 @@ 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);
this.toggleCollapsedSidebar(true, true);
}
});
this.$openSidebar.on('click', () => this.toggleSidebarNav(true));
......@@ -34,7 +39,7 @@ export default class ContextualSidebar {
this.$overlay.on('click', () => this.toggleSidebarNav(false));
this.$sidebarToggle.on('click', () => {
const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
this.toggleCollapsedSidebar(value);
this.toggleCollapsedSidebar(value, true);
});
$(window).on('resize', () => _.debounce(this.render(), 100));
......@@ -53,16 +58,19 @@ export default class ContextualSidebar {
this.$sidebar.removeClass('sidebar-collapsed-desktop');
}
toggleCollapsedSidebar(collapsed) {
toggleCollapsedSidebar(collapsed, saveCookie) {
const breakpoint = bp.getBreakpointSize();
if (this.$sidebar.length) {
this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed);
this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
}
if (saveCookie) {
ContextualSidebar.setCollapsedCookie(collapsed);
}
this.toggleSidebarOverflow();
requestIdleCallback(this.toggleSidebarOverflow);
}
toggleSidebarOverflow() {
......@@ -74,13 +82,15 @@ export default class ContextualSidebar {
}
render() {
if (!this.$sidebar.length) return;
const breakpoint = bp.getBreakpointSize();
if (breakpoint === 'sm' || breakpoint === 'md') {
this.toggleCollapsedSidebar(true);
this.toggleCollapsedSidebar(true, false);
} else if (breakpoint === 'lg') {
const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
this.toggleCollapsedSidebar(collapse);
this.toggleCollapsedSidebar(collapse, false);
}
}
}
......@@ -24,6 +24,9 @@ export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
let headerHeight = 50;
export const getHeaderHeight = () => headerHeight;
const setHeaderHeight = () => {
headerHeight = sidebar.offsetTop;
};
export const isSidebarCollapsed = () =>
sidebar && sidebar.classList.contains('sidebar-collapsed-desktop');
......@@ -186,7 +189,7 @@ export default () => {
});
}
headerHeight = document.querySelector('.nav-sidebar').offsetTop;
requestIdleCallback(setHeaderHeight);
items.forEach(el => {
const subItems = el.querySelector('.sidebar-sub-level-items');
......
......@@ -11,14 +11,18 @@ function hideEndFade($scrollingTabs) {
});
}
function initDeferred() {
$(document).trigger('init.scrolling-tabs');
}
export default function initLayoutNav() {
const contextualSidebar = new ContextualSidebar();
contextualSidebar.bindEvents();
initFlyOutNav();
$(document)
.on('init.scrolling-tabs', () => {
// We need to init it on DomContentLoaded as others could also call it
$(document).on('init.scrolling-tabs', () => {
const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
$scrollingTabs.addClass('is-initialized');
......@@ -53,6 +57,7 @@ export default function initLayoutNav() {
}
}
});
})
.trigger('init.scrolling-tabs');
});
requestIdleCallback(initDeferred);
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment