Fix sidebar flyout navigationfix-flyout-navs

Show flyout nav for active item when collapsed.

5 files changed, 45 insertions, 3 deletions

diff --git a/app/assets/javascripts/contextual_sidebar.js b/app/assets/javascripts/contextual_sidebar.js
index b62ec8a651b..9263e9b27e4 100644
--- a/app/assets/javascripts/contextual_sidebar.js
+++ b/app/assets/javascripts/contextual_sidebar.js
@@ -78,7 +78,7 @@ export default class ContextualSidebar {
     const dbp = ContextualSidebar.isDesktopBreakpoint();
 
     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.$page.toggleClass(
         'page-with-icon-sidebar',
diff --git a/app/views/layouts/nav/sidebar/_project.html.haml b/app/views/layouts/nav/sidebar/_project.html.haml
index 9b6551552c7..49ff976f8e8 100644
--- a/app/views/layouts/nav/sidebar/_project.html.haml
+++ b/app/views/layouts/nav/sidebar/_project.html.haml
@@ -9,7 +9,7 @@
           = @project.name
     %ul.sidebar-top-level-items
       = 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
             = sprite_icon('home')
           %span.nav-item-name
diff --git a/app/views/shared/_sidebar_toggle_button.html.haml b/app/views/shared/_sidebar_toggle_button.html.haml
index d90a6d43761..d499bc0a253 100644
--- a/app/views/shared/_sidebar_toggle_button.html.haml
+++ b/app/views/shared/_sidebar_toggle_button.html.haml
@@ -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-right', css_class: 'icon-angle-double-right')
   %span.collapse-text= _("Collapse sidebar")
diff --git a/changelogs/unreleased/fix-flyout-navs.yml b/changelogs/unreleased/fix-flyout-navs.yml
new file mode 100644
index 00000000000..c21f1037f09
--- /dev/null
+++ b/changelogs/unreleased/fix-flyout-navs.yml
@@ -0,0 +1,5 @@
+---
+title: Fix sidebar flyout navigation
+merge_request: 29571
+author:
+type: fixed
diff --git a/spec/features/contextual_sidebar_spec.rb b/spec/features/contextual_sidebar_spec.rb
new file mode 100644
index 00000000000..88da1b7966b
--- /dev/null
+++ b/spec/features/contextual_sidebar_spec.rb
@@ -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