Commit fde3f619 authored by Ezekiel's avatar Ezekiel Committed by Ezekiel Kigbo

Fixed navigation sidebar flashing open on page load

Adds the sidebar-collapsed-mobile class to the haml layouts
and sets media queries to display the sidebar collapsed by
default for sreen sizes greater than `sm` and less than `lg`
parent f8b1ef92
......@@ -29,7 +29,7 @@ export default class ContextualSidebar {
document.addEventListener('click', e => {
if (
!e.target.closest('.nav-sidebar') &&
(bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md')
!ContextualSidebar.isDesktopBreakpoint(bp.getBreakpointSize())
) {
this.toggleCollapsedSidebar(true, true);
}
......@@ -38,13 +38,23 @@ export default class ContextualSidebar {
this.$closeSidebar.on('click', () => this.toggleSidebarNav(false));
this.$overlay.on('click', () => this.toggleSidebarNav(false));
this.$sidebarToggle.on('click', () => {
const breakpoint = bp.getBreakpointSize();
if (!ContextualSidebar.isDesktopBreakpoint(breakpoint)) {
const collapsed = !this.$sidebar.hasClass('sidebar-collapsed-mobile');
this.toggleMobileCollapsedSidebar(collapsed);
} else if (breakpoint === 'lg') {
const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
this.toggleCollapsedSidebar(value, true);
}
});
$(window).on('resize', () => _.debounce(this.render(), 100));
}
// TODO: use the breakpoints from breakpoints.js once they have been updated for bootstrap 4
// See related issue and discussion: https://gitlab.com/gitlab-org/gitlab-ce/issues/56745
static isDesktopBreakpoint = (_bp = '') => ['xl', 'lg'].indexOf(_bp) > -1;
static setCollapsedCookie(value) {
if (bp.getBreakpointSize() !== 'lg') {
return;
......@@ -58,12 +68,21 @@ export default class ContextualSidebar {
this.$sidebar.removeClass('sidebar-collapsed-desktop');
}
toggleMobileCollapsedSidebar(collapsed) {
this.$sidebar.toggleClass('sidebar-collapsed-mobile', collapsed);
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());
}
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);
this.$page.toggleClass('page-with-contextual-sidebar', true);
}
if (saveCookie) {
......@@ -86,8 +105,8 @@ export default class ContextualSidebar {
const breakpoint = bp.getBreakpointSize();
if (breakpoint === 'sm' || breakpoint === 'md') {
this.toggleCollapsedSidebar(true, false);
if (!ContextualSidebar.isDesktopBreakpoint(breakpoint)) {
this.toggleMobileCollapsedSidebar(true);
} else if (breakpoint === 'lg') {
const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
this.toggleCollapsedSidebar(collapse, false);
......
.page-with-contextual-sidebar {
transition: padding-left $sidebar-transition-duration;
@include media-breakpoint-up(md) {
@include media-breakpoint-up(sm) {
padding-left: $contextual-sidebar-collapsed-width;
}
@include media-breakpoint-up(lg) {
@include media-breakpoint-up(xl) {
padding-left: $contextual-sidebar-width;
}
......@@ -89,7 +89,7 @@
}
}
&.sidebar-collapsed-desktop {
@mixin collapse-contextual-sidebar {
width: $contextual-sidebar-collapsed-width;
.nav-sidebar-inner-scroll {
......@@ -115,6 +115,17 @@
}
}
&.sidebar-collapsed-desktop {
@include collapse-contextual-sidebar;
}
&.sidebar-collapsed-mobile {
// md = 768, xl = 1200px
@media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, xl)) {
@include collapse-contextual-sidebar;
}
}
&.sidebar-expanded-mobile {
left: 0;
}
......@@ -357,7 +368,7 @@
overflow: hidden;
}
.sidebar-collapsed-desktop {
@mixin collapse-contextual-sidebar-content {
.context-header {
height: 60px;
width: $contextual-sidebar-collapsed-width;
......@@ -395,6 +406,16 @@
}
}
.sidebar-collapsed-desktop {
@include collapse-contextual-sidebar-content;
}
.sidebar-collapsed-mobile {
@media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, xl)) {
@include collapse-contextual-sidebar-content;
}
}
.fly-out-top-item {
> a {
display: flex;
......
.nav-sidebar.qa-admin-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar.qa-admin-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar-inner-scroll
.context-header
= link_to admin_root_path, title: _('Admin Overview') do
......
......@@ -2,7 +2,7 @@
- merge_requests_count = group_merge_requests_count(state: 'opened')
- issues_sub_menu_items = ['groups#issues', 'labels#index', 'milestones#index', 'boards#index', 'boards#show']
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar-inner-scroll
.context-header
= link_to group_path(@group), title: @group.name do
......
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar-inner-scroll
.context-header
= link_to instance_statistics_root_path, title: _('Instance Statistics') do
......
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar-inner-scroll
.context-header
= link_to profile_path, title: _('Profile Settings') do
......
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
.nav-sidebar-inner-scroll
- can_edit = can?(current_user, :admin_project, @project)
.context-header
......
---
title: Fixed navigation sidebar flashing open on page load
merge_request: 24555
author:
type: fixed
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