diff options
author | Phil Hughes <me@iamphill.com> | 2017-08-08 19:27:00 +0000 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-08-08 19:27:00 +0000 |
commit | 9a26f4b3e2ff676b6778f61a3e6f38b9dba7e5a7 (patch) | |
tree | caa91a27dd440b191de25c5382f96d3abfd376c8 /app/assets/javascripts/fly_out_nav.js | |
parent | cfabe7bf38f175b28c8c0a1bec584b6b751cbba5 (diff) | |
download | gitlab-ce-9a26f4b3e2ff676b6778f61a3e6f38b9dba7e5a7.tar.gz |
Fix fly-out navigation not showing for active items in collapsed sidebar
Diffstat (limited to 'app/assets/javascripts/fly_out_nav.js')
-rw-r--r-- | app/assets/javascripts/fly_out_nav.js | 20 |
1 files changed, 16 insertions, 4 deletions
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js index 301e82f4610..aabea56408a 100644 --- a/app/assets/javascripts/fly_out_nav.js +++ b/app/assets/javascripts/fly_out_nav.js @@ -1,7 +1,17 @@ /* global bp */ +import Cookies from 'js-cookie'; 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) => { const windowHeight = window.innerHeight; @@ -14,9 +24,10 @@ export const calculateTop = (boundingRect, outerHeight) => { export const showSubLevelItems = (el) => { const subItems = el.querySelector('.sidebar-sub-level-items'); - if (!subItems || !canShowSubItems()) return; + if (!subItems || !canShowSubItems() || !canShowActiveSubItems(el)) return; subItems.style.display = 'block'; + el.classList.add('is-showing-fly-out'); el.classList.add('is-over'); const boundingRect = el.getBoundingClientRect(); @@ -34,15 +45,16 @@ export const showSubLevelItems = (el) => { export const hideSubLevelItems = (el) => { 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'); subItems.style.display = 'none'; subItems.classList.remove('is-above'); }; 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')); items.forEach((el) => { |