diff options
Diffstat (limited to 'app/assets/javascripts/fly_out_nav.js')
-rw-r--r-- | app/assets/javascripts/fly_out_nav.js | 36 |
1 files changed, 23 insertions, 13 deletions
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js index aabea56408a..adf397ca0fe 100644 --- a/app/assets/javascripts/fly_out_nav.js +++ b/app/assets/javascripts/fly_out_nav.js @@ -1,12 +1,15 @@ -/* global bp */ -import Cookies from 'js-cookie'; -import './breakpoints'; +import bp from './breakpoints'; -export const canShowActiveSubItems = (el) => { - const isHiddenByMedia = bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md'; +let headerHeight = 50; +let sidebar; + +export const setSidebar = (el) => { sidebar = el; }; - if (el.classList.contains('active') && !isHiddenByMedia) { - return Cookies.get('sidebar_collapsed') === 'true'; +export const getHeaderHeight = () => headerHeight; + +export const canShowActiveSubItems = (el) => { + if (el.classList.contains('active') && (sidebar && !sidebar.classList.contains('sidebar-icons-only'))) { + return false; } return true; @@ -35,7 +38,7 @@ export const showSubLevelItems = (el) => { const isAbove = top < boundingRect.top; subItems.classList.add('fly-out-list'); - subItems.style.transform = `translate3d(0, ${Math.floor(top)}px, 0)`; + subItems.style.transform = `translate3d(0, ${Math.floor(top) - headerHeight}px, 0)`; if (isAbove) { subItems.classList.add('is-above'); @@ -49,7 +52,8 @@ export const hideSubLevelItems = (el) => { el.classList.remove('is-showing-fly-out'); el.classList.remove('is-over'); - subItems.style.display = 'none'; + subItems.style.display = ''; + subItems.style.transform = ''; subItems.classList.remove('is-above'); }; @@ -57,8 +61,14 @@ export default () => { const items = [...document.querySelectorAll('.sidebar-top-level-items > li')] .filter(el => el.querySelector('.sidebar-sub-level-items')); - items.forEach((el) => { - el.addEventListener('mouseenter', e => showSubLevelItems(e.currentTarget)); - el.addEventListener('mouseleave', e => hideSubLevelItems(e.currentTarget)); - }); + sidebar = document.querySelector('.nav-sidebar'); + + if (sidebar) { + headerHeight = sidebar.offsetTop; + + items.forEach((el) => { + el.addEventListener('mouseenter', e => showSubLevelItems(e.currentTarget)); + el.addEventListener('mouseleave', e => hideSubLevelItems(e.currentTarget)); + }); + } }; |