Commit 25d6a6c4 authored by Phil Hughes's avatar Phil Hughes

stop mobile from showing the sub-items

parent e67c4a6d
/* global bp */
import './breakpoints';
export const canShowSubItems = () => bp.getBreakpointSize() === 'md' || bp.getBreakpointSize() === 'lg';
export const calculateTop = (boundingRect, outerHeight) => { export const calculateTop = (boundingRect, outerHeight) => {
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
const bottomOverflow = windowHeight - (boundingRect.top + outerHeight); const bottomOverflow = windowHeight - (boundingRect.top + outerHeight);
...@@ -9,7 +14,7 @@ export const calculateTop = (boundingRect, outerHeight) => { ...@@ -9,7 +14,7 @@ export const calculateTop = (boundingRect, outerHeight) => {
export const showSubLevelItems = (el) => { export const showSubLevelItems = (el) => {
const subItems = el.querySelector('.sidebar-sub-level-items'); const subItems = el.querySelector('.sidebar-sub-level-items');
if (!subItems) return; if (!subItems || !canShowSubItems()) return;
subItems.style.display = 'block'; subItems.style.display = 'block';
el.classList.add('is-over'); el.classList.add('is-over');
...@@ -28,7 +33,7 @@ export const showSubLevelItems = (el) => { ...@@ -28,7 +33,7 @@ export const showSubLevelItems = (el) => {
export const hideSubLevelItems = (el) => { export const hideSubLevelItems = (el) => {
const subItems = el.querySelector('.sidebar-sub-level-items'); const subItems = el.querySelector('.sidebar-sub-level-items');
if (!subItems) return; if (!subItems || !canShowSubItems()) return;
el.classList.remove('is-over'); el.classList.remove('is-over');
subItems.style.display = 'none'; subItems.style.display = 'none';
......
/* global bp */
import { import {
calculateTop, calculateTop,
hideSubLevelItems, hideSubLevelItems,
showSubLevelItems, showSubLevelItems,
canShowSubItems,
} from '~/fly_out_nav'; } from '~/fly_out_nav';
describe('Fly out sidebar navigation', () => { describe('Fly out sidebar navigation', () => {
let el; let el;
let breakpointSize = 'lg';
beforeEach(() => { beforeEach(() => {
el = document.createElement('div'); el = document.createElement('div');
el.style.position = 'relative'; el.style.position = 'relative';
document.body.appendChild(el); document.body.appendChild(el);
spyOn(bp, 'getBreakpointSize').and.callFake(() => breakpointSize);
}); });
afterEach(() => { afterEach(() => {
el.remove(); el.remove();
breakpointSize = 'lg';
}); });
describe('calculateTop', () => { describe('calculateTop', () => {
...@@ -53,6 +60,16 @@ describe('Fly out sidebar navigation', () => { ...@@ -53,6 +60,16 @@ describe('Fly out sidebar navigation', () => {
).toBe('none'); ).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', () => { it('removes is-over class', () => {
spyOn(el.classList, 'remove'); spyOn(el.classList, 'remove');
...@@ -103,7 +120,17 @@ describe('Fly out sidebar navigation', () => { ...@@ -103,7 +120,17 @@ describe('Fly out sidebar navigation', () => {
).toHaveBeenCalledWith('is-over'); ).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); showSubLevelItems(el);
expect( expect(
...@@ -134,4 +161,20 @@ describe('Fly out sidebar navigation', () => { ...@@ -134,4 +161,20 @@ describe('Fly out sidebar navigation', () => {
).toHaveBeenCalledWith('is-above'); ).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();
});
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment