stop mobile from showing the sub-items

2 files changed, 51 insertions, 3 deletions

diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index 3f64c16a79d..8e9a97fe207 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
@@ -1,3 +1,8 @@
+/* global bp */
+import './breakpoints';
+
+export const canShowSubItems = () => bp.getBreakpointSize() === 'md' || bp.getBreakpointSize() === 'lg';
+
 export const calculateTop = (boundingRect, outerHeight) => {
   const windowHeight = window.innerHeight;
   const bottomOverflow = windowHeight - (boundingRect.top + outerHeight);
@@ -9,7 +14,7 @@ export const calculateTop = (boundingRect, outerHeight) => {
 export const showSubLevelItems = (el) => {
   const subItems = el.querySelector('.sidebar-sub-level-items');
 
-  if (!subItems) return;
+  if (!subItems || !canShowSubItems()) return;
 
   subItems.style.display = 'block';
   el.classList.add('is-over');
@@ -28,7 +33,7 @@ export const showSubLevelItems = (el) => {
 export const hideSubLevelItems = (el) => {
   const subItems = el.querySelector('.sidebar-sub-level-items');
 
-  if (!subItems) return;
+  if (!subItems || !canShowSubItems()) return;
 
   el.classList.remove('is-over');
   subItems.style.display = 'none';
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js
index 74775911505..ab74f3e00ec 100644
--- a/spec/javascripts/fly_out_nav_spec.js
+++ b/spec/javascripts/fly_out_nav_spec.js
@@ -1,19 +1,26 @@
+/* global bp */
 import {
   calculateTop,
   hideSubLevelItems,
   showSubLevelItems,
+  canShowSubItems,
 } from '~/fly_out_nav';
 
 describe('Fly out sidebar navigation', () => {
   let el;
+  let breakpointSize = 'lg';
+
   beforeEach(() => {
     el = document.createElement('div');
     el.style.position = 'relative';
     document.body.appendChild(el);
+
+    spyOn(bp, 'getBreakpointSize').and.callFake(() => breakpointSize);
   });
 
   afterEach(() => {
     el.remove();
+    breakpointSize = 'lg';
   });
 
   describe('calculateTop', () => {
@@ -53,6 +60,16 @@ describe('Fly out sidebar navigation', () => {
       ).toBe('none');
     });
 
+    it('does not hude subitems on mobile', () => {
+      breakpointSize = 'sm';
+
+      hideSubLevelItems(el);
+
+      expect(
+        el.querySelector('.sidebar-sub-level-items').style.display,
+      ).not.toBe('none');
+    });
+
     it('removes is-over class', () => {
       spyOn(el.classList, 'remove');
 
@@ -103,7 +120,17 @@ describe('Fly out sidebar navigation', () => {
       ).toHaveBeenCalledWith('is-over');
     });
 
-    it('shows sub-items', () => {
+    it('does not show sub-items on mobile', () => {
+      breakpointSize = 'sm';
+
+      showSubLevelItems(el);
+
+      expect(
+        el.querySelector('.sidebar-sub-level-items').style.display,
+      ).not.toBe('block');
+    });
+
+    it('does not shows sub-items', () => {
       showSubLevelItems(el);
 
       expect(
@@ -134,4 +161,20 @@ describe('Fly out sidebar navigation', () => {
       ).toHaveBeenCalledWith('is-above');
     });
   });
+
+  describe('canShowSubItems', () => {
+    it('returns true if on desktop size', () => {
+      expect(
+        canShowSubItems(),
+      ).toBeTruthy();
+    });
+
+    it('returns false if on mobile size', () => {
+      breakpointSize = 'sm';
+
+      expect(
+        canShowSubItems(),
+      ).toBeFalsy();
+    });
+  });
 });