Fix sidebar flyout navigation
Show flyout nav for active item when collapsed.
This commit is contained in:
parent
b6e56ed3d3
commit
32c5fa99fe
|
@ -78,7 +78,7 @@ export default class ContextualSidebar {
|
||||||
const dbp = ContextualSidebar.isDesktopBreakpoint();
|
const dbp = ContextualSidebar.isDesktopBreakpoint();
|
||||||
|
|
||||||
if (this.$sidebar.length) {
|
if (this.$sidebar.length) {
|
||||||
this.$sidebar.toggleClass('sidebar-collapsed-desktop', collapsed);
|
this.$sidebar.toggleClass(`sidebar-collapsed-desktop ${SIDEBAR_COLLAPSED_CLASS}`, collapsed);
|
||||||
this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false);
|
this.$sidebar.toggleClass('sidebar-expanded-mobile', !dbp ? !collapsed : false);
|
||||||
this.$page.toggleClass(
|
this.$page.toggleClass(
|
||||||
'page-with-icon-sidebar',
|
'page-with-icon-sidebar',
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
= @project.name
|
= @project.name
|
||||||
%ul.sidebar-top-level-items
|
%ul.sidebar-top-level-items
|
||||||
= nav_link(path: sidebar_projects_paths, html_options: { class: 'home' }) do
|
= nav_link(path: sidebar_projects_paths, html_options: { class: 'home' }) do
|
||||||
= link_to project_path(@project), class: 'shortcuts-project' do
|
= link_to project_path(@project), class: 'shortcuts-project qa-link-project' do
|
||||||
.nav-icon-container
|
.nav-icon-container
|
||||||
= sprite_icon('home')
|
= sprite_icon('home')
|
||||||
%span.nav-item-name
|
%span.nav-item-name
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
%a.toggle-sidebar-button.js-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" }
|
%a.toggle-sidebar-button.js-toggle-sidebar.qa-toggle-sidebar{ role: "button", type: "button", title: "Toggle sidebar" }
|
||||||
= sprite_icon('angle-double-left', css_class: 'icon-angle-double-left')
|
= sprite_icon('angle-double-left', css_class: 'icon-angle-double-left')
|
||||||
= sprite_icon('angle-double-right', css_class: 'icon-angle-double-right')
|
= sprite_icon('angle-double-right', css_class: 'icon-angle-double-right')
|
||||||
%span.collapse-text= _("Collapse sidebar")
|
%span.collapse-text= _("Collapse sidebar")
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Fix sidebar flyout navigation
|
||||||
|
merge_request: 29571
|
||||||
|
author:
|
||||||
|
type: fixed
|
|
@ -0,0 +1,37 @@
|
||||||
|
# frozen_string_literal: true
|
||||||
|
|
||||||
|
require 'spec_helper'
|
||||||
|
|
||||||
|
describe 'Contextual sidebar', :js do
|
||||||
|
let(:user) { create(:user) }
|
||||||
|
let(:project) { create(:project) }
|
||||||
|
|
||||||
|
before do
|
||||||
|
project.add_maintainer(user)
|
||||||
|
sign_in(user)
|
||||||
|
|
||||||
|
visit project_path(project)
|
||||||
|
end
|
||||||
|
|
||||||
|
it 'shows flyout navs when collapsed or expanded apart from on the active item when expanded' do
|
||||||
|
expect(page).not_to have_selector('.js-sidebar-collapsed')
|
||||||
|
|
||||||
|
find('.qa-link-pipelines').hover
|
||||||
|
|
||||||
|
expect(page).to have_selector('.is-showing-fly-out')
|
||||||
|
|
||||||
|
find('.qa-link-project').hover
|
||||||
|
|
||||||
|
expect(page).not_to have_selector('.is-showing-fly-out')
|
||||||
|
|
||||||
|
find('.qa-toggle-sidebar').click
|
||||||
|
|
||||||
|
find('.qa-link-pipelines').hover
|
||||||
|
|
||||||
|
expect(page).to have_selector('.is-showing-fly-out')
|
||||||
|
|
||||||
|
find('.qa-link-project').hover
|
||||||
|
|
||||||
|
expect(page).to have_selector('.is-showing-fly-out')
|
||||||
|
end
|
||||||
|
end
|
Loading…
Reference in New Issue