Commit 54ede0b8 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Simon Knox

Merge branch 'fly-out-nav-collapsed' into 'master'

Fix fly-out navigation not showing for active items in collapsed sidebar

See merge request !13353
parent 1e80f906
/* global bp */ /* global bp */
import Cookies from 'js-cookie';
import './breakpoints'; import './breakpoints';
export const canShowSubItems = () => bp.getBreakpointSize() === 'md' || bp.getBreakpointSize() === 'lg'; export const canShowActiveSubItems = (el) => {
const isHiddenByMedia = bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md';
if (el.classList.contains('active') && !isHiddenByMedia) {
return Cookies.get('sidebar_collapsed') === 'true';
}
return true;
};
export const canShowSubItems = () => bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md' || bp.getBreakpointSize() === 'lg';
export const calculateTop = (boundingRect, outerHeight) => { export const calculateTop = (boundingRect, outerHeight) => {
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
...@@ -14,9 +24,10 @@ export const calculateTop = (boundingRect, outerHeight) => { ...@@ -14,9 +24,10 @@ 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 || !canShowSubItems()) return; if (!subItems || !canShowSubItems() || !canShowActiveSubItems(el)) return;
subItems.style.display = 'block'; subItems.style.display = 'block';
el.classList.add('is-showing-fly-out');
el.classList.add('is-over'); el.classList.add('is-over');
const boundingRect = el.getBoundingClientRect(); const boundingRect = el.getBoundingClientRect();
...@@ -34,15 +45,16 @@ export const showSubLevelItems = (el) => { ...@@ -34,15 +45,16 @@ 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 || !canShowSubItems()) return; if (!subItems || !canShowSubItems() || !canShowActiveSubItems(el)) return;
el.classList.remove('is-showing-fly-out');
el.classList.remove('is-over'); el.classList.remove('is-over');
subItems.style.display = 'none'; subItems.style.display = 'none';
subItems.classList.remove('is-above'); subItems.classList.remove('is-above');
}; };
export default () => { export default () => {
const items = [...document.querySelectorAll('.sidebar-top-level-items > li:not(.active)')] const items = [...document.querySelectorAll('.sidebar-top-level-items > li')]
.filter(el => el.querySelector('.sidebar-sub-level-items')); .filter(el => el.querySelector('.sidebar-sub-level-items'));
items.forEach((el) => { items.forEach((el) => {
......
...@@ -218,9 +218,8 @@ $new-sidebar-collapsed-width: 50px; ...@@ -218,9 +218,8 @@ $new-sidebar-collapsed-width: 50px;
} }
} }
&:not(.active) { &.is-showing-fly-out {
> a { > a {
margin-left: 1px;
margin-right: 2px; margin-right: 2px;
} }
...@@ -271,6 +270,14 @@ $new-sidebar-collapsed-width: 50px; ...@@ -271,6 +270,14 @@ $new-sidebar-collapsed-width: 50px;
} }
} }
> .active {
box-shadow: none;
> a {
background-color: transparent;
}
}
a { a {
padding: 8px 16px; padding: 8px 16px;
color: $gl-text-color; color: $gl-text-color;
......
/* global bp */ /* global bp */
import Cookies from 'js-cookie';
import { import {
calculateTop, calculateTop,
hideSubLevelItems, hideSubLevelItems,
showSubLevelItems, showSubLevelItems,
canShowSubItems, canShowSubItems,
canShowActiveSubItems,
} from '~/fly_out_nav'; } from '~/fly_out_nav';
describe('Fly out sidebar navigation', () => { describe('Fly out sidebar navigation', () => {
...@@ -61,7 +63,7 @@ describe('Fly out sidebar navigation', () => { ...@@ -61,7 +63,7 @@ describe('Fly out sidebar navigation', () => {
}); });
it('does not hude subitems on mobile', () => { it('does not hude subitems on mobile', () => {
breakpointSize = 'sm'; breakpointSize = 'xs';
hideSubLevelItems(el); hideSubLevelItems(el);
...@@ -121,7 +123,7 @@ describe('Fly out sidebar navigation', () => { ...@@ -121,7 +123,7 @@ describe('Fly out sidebar navigation', () => {
}); });
it('does not show sub-items on mobile', () => { it('does not show sub-items on mobile', () => {
breakpointSize = 'sm'; breakpointSize = 'xs';
showSubLevelItems(el); showSubLevelItems(el);
...@@ -170,11 +172,59 @@ describe('Fly out sidebar navigation', () => { ...@@ -170,11 +172,59 @@ describe('Fly out sidebar navigation', () => {
}); });
it('returns false if on mobile size', () => { it('returns false if on mobile size', () => {
breakpointSize = 'sm'; breakpointSize = 'xs';
expect( expect(
canShowSubItems(), canShowSubItems(),
).toBeFalsy(); ).toBeFalsy();
}); });
}); });
describe('canShowActiveSubItems', () => {
afterEach(() => {
Cookies.remove('sidebar_collapsed');
});
it('returns true by default', () => {
expect(
canShowActiveSubItems(el),
).toBeTruthy();
});
it('returns false when cookie is false & element is active', () => {
Cookies.set('sidebar_collapsed', 'false');
el.classList.add('active');
expect(
canShowActiveSubItems(el),
).toBeFalsy();
});
it('returns true when cookie is false & element is active', () => {
Cookies.set('sidebar_collapsed', 'true');
el.classList.add('active');
expect(
canShowActiveSubItems(el),
).toBeTruthy();
});
it('returns true when element is active & breakpoint is sm', () => {
breakpointSize = 'sm';
el.classList.add('active');
expect(
canShowActiveSubItems(el),
).toBeTruthy();
});
it('returns true when element is active & breakpoint is md', () => {
breakpointSize = 'md';
el.classList.add('active');
expect(
canShowActiveSubItems(el),
).toBeTruthy();
});
});
}); });
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