stop mobile from showing the sub-items
This commit is contained in:
parent
e67c4a6d91
commit
25d6a6c4b5
|
@ -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';
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue