Merge branch 'fly-out-nav-jump-fix' into 'master'

Fixed fly-out nav jumping

Closes #36699

See merge request !13690

app/assets/javascripts/fly_out_nav.js

-import Cookies from 'js-cookie';
 import bp from './breakpoints';
 
 const HIDE_INTERVAL_TIMEOUT = 300;
@@ -8,18 +7,22 @@ const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
 let currentOpenMenu = null;
 let menuCornerLocs;
 let timeoutId;
+let sidebar;
 
 export const mousePos = [];
 
+export const setSidebar = (el) => { sidebar = el; };
 export const setOpenMenu = (menu = null) => { currentOpenMenu = menu; };
 
 export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
 
-export const canShowActiveSubItems = (el) => {
-  const isHiddenByMedia = bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md';
+let headerHeight = 50;
+
+export const getHeaderHeight = () => headerHeight;
 
-  if (el.classList.contains('active') && !isHiddenByMedia) {
-    return Cookies.get('sidebar_collapsed') === 'true';
+export const canShowActiveSubItems = (el) => {
+  if (el.classList.contains('active') && (sidebar && !sidebar.classList.contains('sidebar-icons-only'))) {
+    return false;
   }
 
   return true;
@@ -74,7 +77,7 @@ export const moveSubItemsToPosition = (el, subItems) => {
   const isAbove = top < boundingRect.top;
 
   subItems.classList.add('fly-out-list');
-  subItems.style.transform = `translate3d(0, ${Math.floor(top)}px, 0)`; // eslint-disable-line no-param-reassign
+  subItems.style.transform = `translate3d(0, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign
 
   const subItemsRect = subItems.getBoundingClientRect();
 
@@ -139,13 +142,13 @@ export const documentMouseMove = (e) => {
 };
 
 export default () => {
-  const sidebar = document.querySelector('.sidebar-top-level-items');
+  sidebar = document.querySelector('.nav-sidebar');
 
   if (!sidebar) return;
 
   const items = [...sidebar.querySelectorAll('.sidebar-top-level-items > li')];
 
-  sidebar.addEventListener('mouseleave', () => {
+  sidebar.querySelector('.sidebar-top-level-items').addEventListener('mouseleave', () => {
     clearTimeout(timeoutId);
 
     timeoutId = setTimeout(() => {
@@ -153,6 +156,8 @@ export default () => {
     }, getHideSubItemsInterval());
   });
 
+  headerHeight = document.querySelector('.nav-sidebar').offsetTop;
+
   items.forEach((el) => {
     const subItems = el.querySelector('.sidebar-sub-level-items');
 

spec/javascripts/fly_out_nav_spec.js

-import Cookies from 'js-cookie';
 import {
   calculateTop,
   showSubLevelItems,
@@ -10,6 +9,8 @@ import {
   mousePos,
   getHideSubItemsInterval,
   documentMouseMove,
+  getHeaderHeight,
+  setSidebar,
 } from '~/fly_out_nav';
 import bp from '~/breakpoints';
 
@@ -59,7 +60,7 @@ describe('Fly out sidebar navigation', () => {
 
   describe('getHideSubItemsInterval', () => {
     beforeEach(() => {
-      el.innerHTML = '<div class="sidebar-sub-level-items" style="position: fixed; top: 0; left: 100px; height: 50px;"></div>';
+      el.innerHTML = '<div class="sidebar-sub-level-items" style="position: fixed; top: 0; left: 100px; height: 150px;"></div>';
     });
 
     it('returns 0 if currentOpenMenu is nil', () => {
@@ -245,7 +246,7 @@ describe('Fly out sidebar navigation', () => {
 
       expect(
         subItems.style.transform,
-      ).toBe(`translate3d(0px, ${Math.floor(el.getBoundingClientRect().top)}px, 0px)`);
+      ).toBe(`translate3d(0px, ${Math.floor(el.getBoundingClientRect().top) - getHeaderHeight()}px, 0px)`);
     });
 
     it('sets is-above when element is above', () => {
@@ -281,7 +282,7 @@ describe('Fly out sidebar navigation', () => {
 
   describe('canShowActiveSubItems', () => {
     afterEach(() => {
-      Cookies.remove('sidebar_collapsed');
+      setSidebar(null);
     });
 
     it('returns true by default', () => {
@@ -290,36 +291,23 @@ describe('Fly out sidebar navigation', () => {
       ).toBeTruthy();
     });
 
-    it('returns false when cookie is false & element is active', () => {
-      Cookies.set('sidebar_collapsed', 'false');
+    it('returns false when active & expanded sidebar', () => {
+      const sidebar = document.createElement('div');
       el.classList.add('active');
 
-      expect(
-        canShowActiveSubItems(el),
-      ).toBeFalsy();
-    });
-
-    it('returns true when cookie is false & element is active', () => {
-      Cookies.set('sidebar_collapsed', 'true');
-      el.classList.add('active');
+      setSidebar(sidebar);
 
       expect(
         canShowActiveSubItems(el),
-      ).toBeTruthy();
+      ).toBeFalsy();
     });
 
-    it('returns true when element is active & breakpoint is sm', () => {
-      breakpointSize = 'sm';
+    it('returns true when active & collapsed sidebar', () => {
+      const sidebar = document.createElement('div');
+      sidebar.classList.add('sidebar-icons-only');
       el.classList.add('active');
 
-      expect(
-        canShowActiveSubItems(el),
-      ).toBeTruthy();
-    });
-
-    it('returns true when element is active & breakpoint is md', () => {
-      breakpointSize = 'md';
-      el.classList.add('active');
+      setSidebar(sidebar);
 
       expect(
         canShowActiveSubItems(el),