diff options
8 files changed, 62 insertions, 71 deletions
diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js index f59d953c2f1..a9013025bad 100644 --- a/app/assets/javascripts/contextual_sidebar.js +++ b/app/assets/javascripts/contextual_sidebar.js @@ -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); diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index cf25213cf2e..4f4ce389d5d 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -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; diff --git a/app/views/layouts/nav/sidebar/_admin.html.haml b/app/views/layouts/nav/sidebar/_admin.html.haml index c4903dfe30b..2fdd65f639b 100644 --- a/app/views/layouts/nav/sidebar/_admin.html.haml +++ b/app/views/layouts/nav/sidebar/_admin.html.haml @@ -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 diff --git a/app/views/layouts/nav/sidebar/_group.html.haml b/app/views/layouts/nav/sidebar/_group.html.haml index 3adbe8b1d3d..21ea9f3b2f3 100644 --- a/app/views/layouts/nav/sidebar/_group.html.haml +++ b/app/views/layouts/nav/sidebar/_group.html.haml @@ -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 diff --git a/app/views/layouts/nav/sidebar/_instance_statistics.html.haml b/app/views/layouts/nav/sidebar/_instance_statistics.html.haml index e28b1f08099..57180f27146 100644 --- a/app/views/layouts/nav/sidebar/_instance_statistics.html.haml +++ b/app/views/layouts/nav/sidebar/_instance_statistics.html.haml @@ -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 diff --git a/app/views/layouts/nav/sidebar/_profile.html.haml b/app/views/layouts/nav/sidebar/_profile.html.haml index ed3d6d18077..1e3bb8f1224 100644 --- a/app/views/layouts/nav/sidebar/_profile.html.haml +++ b/app/views/layouts/nav/sidebar/_profile.html.haml @@ -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 diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml index 5e2638a2428..7b492efeb09 100644 --- a/app/views/layouts/nav/sidebar/_project.html.haml +++ b/app/views/layouts/nav/sidebar/_project.html.haml @@ -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 diff --git a/spec/support/shared_examples/views/nav_sidebar.rb b/spec/support/shared_examples/views/nav_sidebar.rb index 3e709c8ab77..6ac5abe275d 100644 --- a/spec/support/shared_examples/views/nav_sidebar.rb +++ b/spec/support/shared_examples/views/nav_sidebar.rb @@ -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 |