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) => {
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';
......
/* 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();
});
});
});
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