Updated nav-sidebar to collapse on load
Adds the collapsed mixin to the styling for .nav-sidebar ensuring the nav-sidebar is collapsed on load via media queries. Removes the need for an intermediate class to collapse the sidebar on mobile viewports Updated toggleCollapsedSidebar to check for desktop breakpoint
This commit is contained in:
parent
1622e86301
commit
9ef058bee2
|
@ -42,8 +42,7 @@ export default class ContextualSidebar {
|
|||
const breakpoint = bp.getBreakpointSize();
|
||||
|
||||
if (!ContextualSidebar.isDesktopBreakpoint(breakpoint)) {
|
||||
const collapsed = !this.$sidebar.hasClass('sidebar-collapsed-mobile');
|
||||
this.toggleMobileCollapsedSidebar(collapsed);
|
||||
this.toggleSidebarNav(!this.$sidebar.hasClass('sidebar-expanded-mobile'));
|
||||
} else if (breakpoint === 'lg') {
|
||||
const value = !this.$sidebar.hasClass('sidebar-collapsed-desktop');
|
||||
this.toggleCollapsedSidebar(value, true);
|
||||
|
@ -64,25 +63,22 @@ export default class ContextualSidebar {
|
|||
}
|
||||
|
||||
toggleSidebarNav(show) {
|
||||
this.$sidebar.toggleClass('sidebar-expanded-mobile', show);
|
||||
this.$overlay.toggleClass('mobile-nav-open', show);
|
||||
this.$sidebar.removeClass('sidebar-collapsed-desktop');
|
||||
}
|
||||
const breakpoint = bp.getBreakpointSize();
|
||||
const dbp = ContextualSidebar.isDesktopBreakpoint(breakpoint);
|
||||
|
||||
toggleMobileCollapsedSidebar(collapsed) {
|
||||
this.$sidebar.toggleClass('sidebar-collapsed-mobile', collapsed);
|
||||
this.$sidebar.toggleClass('sidebar-expanded-mobile', !collapsed);
|
||||
this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? show : false);
|
||||
this.$overlay.toggleClass('mobile-nav-open', breakpoint === 'xs' ? show : false);
|
||||
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());
|
||||
this.$page.toggleClass('page-with-contextual-sidebar', true);
|
||||
}
|
||||
|
||||
toggleCollapsedSidebar(collapsed, saveCookie) {
|
||||
const breakpoint = bp.getBreakpointSize();
|
||||
const dbp = ContextualSidebar.isDesktopBreakpoint(breakpoint);
|
||||
|
||||
if (this.$sidebar.length) {
|
||||
this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed);
|
||||
this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false);
|
||||
this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
|
||||
this.$page.toggleClass('page-with-contextual-sidebar', true);
|
||||
}
|
||||
|
@ -106,9 +102,8 @@ export default class ContextualSidebar {
|
|||
if (!this.$sidebar.length) return;
|
||||
|
||||
const breakpoint = bp.getBreakpointSize();
|
||||
|
||||
if (!ContextualSidebar.isDesktopBreakpoint(breakpoint)) {
|
||||
this.toggleMobileCollapsedSidebar(true);
|
||||
this.toggleSidebarNav(false);
|
||||
} else if (breakpoint === 'lg') {
|
||||
const collapse = parseBoolean(Cookies.get('sidebar_collapsed'));
|
||||
this.toggleCollapsedSidebar(collapse, false);
|
||||
|
|
|
@ -71,6 +71,44 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin collapse-contextual-sidebar-content {
|
||||
.context-header {
|
||||
height: 60px;
|
||||
width: $contextual-sidebar-collapsed-width;
|
||||
|
||||
a {
|
||||
padding: 10px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-top-level-items > li {
|
||||
.sidebar-sub-level-items {
|
||||
&:not(.flyout-list) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon-container {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.toggle-sidebar-button {
|
||||
padding: 16px;
|
||||
width: $contextual-sidebar-collapsed-width - 1px;
|
||||
|
||||
.collapse-text,
|
||||
.icon-angle-double-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-angle-double-right {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sidebar {
|
||||
transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
|
||||
position: fixed;
|
||||
|
@ -119,13 +157,6 @@
|
|||
@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;
|
||||
}
|
||||
|
@ -178,6 +209,13 @@
|
|||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:not(.sidebar-expanded-mobile) {
|
||||
@media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, xl)) {
|
||||
@include collapse-contextual-sidebar;
|
||||
@include collapse-contextual-sidebar-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sidebar-inner-scroll {
|
||||
|
@ -368,54 +406,10 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin collapse-contextual-sidebar-content {
|
||||
.context-header {
|
||||
height: 60px;
|
||||
width: $contextual-sidebar-collapsed-width;
|
||||
|
||||
a {
|
||||
padding: 10px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-top-level-items > li {
|
||||
.sidebar-sub-level-items {
|
||||
&:not(.flyout-list) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon-container {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.toggle-sidebar-button {
|
||||
padding: 16px;
|
||||
width: $contextual-sidebar-collapsed-width - 1px;
|
||||
|
||||
.collapse-text,
|
||||
.icon-angle-double-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon-angle-double-right {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.nav-sidebar.qa-admin-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
|
||||
.nav-sidebar.qa-admin-sidebar{ 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.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
|
||||
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
|
||||
.nav-sidebar-inner-scroll
|
||||
.context-header
|
||||
= link_to group_path(@group), title: @group.name do
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
|
||||
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
|
||||
.nav-sidebar-inner-scroll
|
||||
.context-header
|
||||
= link_to instance_statistics_root_path, title: _('Instance Statistics') do
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
|
||||
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
|
||||
.nav-sidebar-inner-scroll
|
||||
.context-header
|
||||
= link_to profile_path, title: _('Profile Settings') do
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
.nav-sidebar.sidebar-collapsed-mobile{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
|
||||
.nav-sidebar{ class: ("sidebar-collapsed-desktop" if collapsed_sidebar?) }
|
||||
.nav-sidebar-inner-scroll
|
||||
- can_edit = can?(current_user, :admin_project, @project)
|
||||
.context-header
|
||||
|
|
|
@ -4,6 +4,8 @@ shared_examples 'has nav sidebar' do
|
|||
it 'has collapsed nav sidebar on mobile' do
|
||||
render
|
||||
|
||||
expect(rendered).to have_selector('.nav-sidebar.sidebar-collapsed-mobile')
|
||||
expect(rendered).to have_selector('.nav-sidebar')
|
||||
expect(rendered).not_to have_selector('.sidebar-collapsed-desktop')
|
||||
expect(rendered).not_to have_selector('.sidebar-expanded-mobile')
|
||||
end
|
||||
end
|
||||
|
|
Loading…
Reference in New Issue