Replace breakpoints with GlBreakpointInstance in fly_out_nav.js

app/assets/javascripts/fly_out_nav.js

-import bp from './breakpoints';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
 
 const HIDE_INTERVAL_TIMEOUT = 300;
@@ -40,10 +40,7 @@ export const canShowActiveSubItems = el => {
   return true;
 };
 
-export const canShowSubItems = () =>
-  bp.getBreakpointSize() === 'sm' ||
-  bp.getBreakpointSize() === 'md' ||
-  bp.getBreakpointSize() === 'lg';
+export const canShowSubItems = () => ['md', 'lg', 'xl'].includes(bp.getBreakpointSize());
 
 export const getHideSubItemsInterval = () => {
   if (!currentOpenMenu || !mousePos.length) return 0;

spec/javascripts/fly_out_nav_spec.js

+import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
 import {
   calculateTop,
   showSubLevelItems,
@@ -15,7 +16,6 @@ import {
   subItemsMouseLeave,
 } from '~/fly_out_nav';
 import { SIDEBAR_COLLAPSED_CLASS } from '~/contextual_sidebar';
-import bp from '~/breakpoints';
 
 describe('Fly out sidebar navigation', () => {
   let el;
@@ -26,7 +26,7 @@ describe('Fly out sidebar navigation', () => {
     el.style.position = 'relative';
     document.body.appendChild(el);
 
-    spyOn(bp, 'getBreakpointSize').and.callFake(() => breakpointSize);
+    spyOn(GlBreakpointInstance, 'getBreakpointSize').and.callFake(() => breakpointSize);
 
     setOpenMenu(null);
   });