Fix sidebar flyout navigation

Show flyout nav for active item when collapsed.

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',

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

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")

changelogs/unreleased/fix-flyout-navs.yml

@@ -0,0 +1,5 @@
+---
+title: Fix sidebar flyout navigation
+merge_request: 29571
+author:
+type: fixed

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