Merge branch...

Merge branch '471315-apply-hover-effect-to-side-menu-navigation-items-when-interacting-with-the-flyout-menu' into 'master' 

Keep hover effect on section title when flyout is hovered

Closes #471315

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/160233



Merged-by: Mireya Andres <mandres@gitlab.com>
Approved-by: Doug Stull <dstull@gitlab.com>
Approved-by: Mireya Andres <mandres@gitlab.com>
Reviewed-by: Mireya Andres <mandres@gitlab.com>
Co-authored-by: Thomas Hutterer <thutterer@gitlab.com>

app/assets/javascripts/super_sidebar/components/menu_section.vue

@@ -62,7 +62,10 @@ export default {
       return this.isExpanded ? 'chevron-up' : 'chevron-down';
     },
     computedLinkClasses() {
-      return this.isActive ? NAV_ITEM_LINK_ACTIVE_CLASS : null;
+      return {
+        [NAV_ITEM_LINK_ACTIVE_CLASS]: this.isActive,
+        'with-mouse-over-flyout': this.isMouseOverFlyout,
+      };
     },
     isActive() {
       return !this.isExpanded && this.item.is_active;

app/assets/stylesheets/framework/super_sidebar.scss

@@ -427,7 +427,8 @@ $command-palette-spacing: px-to-rem(14px);
 
   .super-sidebar-nav-item {
     &:hover,
-    &:focus {
+    &:focus,
+    &.with-mouse-over-flyout {
       background-color: var(--super-sidebar-nav-item-hover-bg);
     }
 

spec/frontend/super_sidebar/components/menu_section_spec.js

@@ -103,14 +103,24 @@ describe('MenuSection component', () => {
           });
 
           describe('when section has items', () => {
-            it('is rendered and shown', async () => {
+            beforeEach(() => {
               createWrapper(
                 { title: 'Asdf', items: [{ title: 'Item1', href: '/item1' }] },
                 { 'has-flyout': true, expanded: false },
               );
+            });
+
+            it('is rendered and shown', async () => {
               await findButton().trigger('pointerover', { pointerType: 'mouse' });
               expect(findFlyout().isVisible()).toBe(true);
             });
+
+            it('adds a class to keep hover effect on button while flyout is hovered', async () => {
+              await findButton().trigger('pointerover', { pointerType: 'mouse' });
+              expect(findButton().classes()).not.toContain('with-mouse-over-flyout');
+              await findFlyout().vm.$emit('mouseover');
+              expect(findButton().classes()).toContain('with-mouse-over-flyout');
+            });
           });
         });
       });