diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css index cf32fe32ec..90e8f65b0d 100644 --- a/libs/blocks/global-navigation/global-navigation.css +++ b/libs/blocks/global-navigation/global-navigation.css @@ -61,7 +61,7 @@ header.global-navigation { right: 20px; /* hamburger menu gutter */ display: none; flex-direction: column; - height: 100vh; + height: calc(100vh - 100% - 1px); border-top: 1px solid var(--feds-borderColor); background-color: var(--feds-background-nav); } @@ -562,6 +562,10 @@ header.global-navigation { flex-direction: initial; } + .feds-navItem--mobile-only { + display: none; + } + .feds-navItem--megaMenu { position: static; } diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index 72777e5c92..439bbebfb8 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -271,6 +271,7 @@ class Gnav { constructor({ content, block } = {}) { this.content = content; this.block = block; + this.customLinks = getConfig()?.customLinks ? getConfig().customLinks.split(',') : []; this.blocks = { profile: { @@ -675,6 +676,11 @@ class Gnav { const toggle = this.elements.mobileToggle; const isExpanded = this.isToggleExpanded(); toggle?.setAttribute('aria-expanded', !isExpanded); + if (!isExpanded) { + document.body.classList.add('disable-scroll'); + } else { + document.body.classList.remove('disable-scroll'); + } this.elements.navWrapper?.classList?.toggle('feds-nav-wrapper--expanded', !isExpanded); closeAllDropdowns(); setCurtainState(!isExpanded); @@ -699,7 +705,7 @@ class Gnav { this.elements.mainNav.style.removeProperty('padding-bottom'); } else { const offset = Math.ceil(this.elements.topnavWrapper.getBoundingClientRect().bottom); - this.elements.mainNav.style.setProperty('padding-bottom', `${offset}px`); + this.elements.mainNav.style.setProperty('padding-bottom', `${2 * offset}px`); } }; @@ -721,6 +727,7 @@ class Gnav { if (isDesktop.matches) { toggle.setAttribute('aria-expanded', false); this.elements.navWrapper.classList.remove('feds-nav-wrapper--expanded'); + document.body.classList.remove('disable-scroll'); setCurtainState(false); closeAllDropdowns(); this.blocks?.search?.instance?.clearSearchForm(); @@ -839,7 +846,10 @@ class Gnav { for await (const [index, item] of items.entries()) { await yieldToMain(); - this.elements.mainNav.appendChild(this.decorateMainNavItem(item, index)); + const mainNavItem = this.decorateMainNavItem(item, index); + if (mainNavItem) { + this.elements.mainNav.appendChild(mainNavItem); + } } if (!hasActiveLink()) { @@ -858,8 +868,9 @@ class Gnav { // eslint-disable-next-line class-methods-use-this getMainNavItemType = (item) => { const itemTopParent = item.closest('div'); + const isLinkGroup = !!item.closest('.link-group'); const hasSyncDropdown = itemTopParent instanceof HTMLElement - && itemTopParent.childElementCount > 1; + && !isLinkGroup && itemTopParent.childElementCount > 1; if (hasSyncDropdown) return 'syncDropdownTrigger'; const hasAsyncDropdown = itemTopParent instanceof HTMLElement && itemTopParent.closest('.large-menu') instanceof HTMLElement; @@ -948,6 +959,8 @@ class Gnav { ${decorateCta({ elem: item, type: itemType, index: index + 1 })} `, item); case 'link': { + let customLinkModifier = ''; + let removeCustomLink = false; const linkElem = item.querySelector('a'); linkElem.className = 'feds-navLink'; linkElem.setAttribute('daa-ll', getAnalyticsValue(linkElem.textContent, index + 1)); @@ -959,11 +972,25 @@ class Gnav { linkElem.setAttribute('tabindex', 0); } + const customLinksSection = item.closest('.link-group'); + if (customLinksSection) { + const removeLink = () => { + const url = new URL(linkElem.href); + linkElem.setAttribute('href', `${url.origin}${url.pathname}${url.search}`); + const linkHash = url.hash.slice(2); + return !this.customLinks.includes(linkHash); + }; + [...customLinksSection.classList].splice(1).forEach((className) => { + customLinkModifier = ` feds-navItem--${className}`; + }); + removeCustomLink = removeLink(); + } + const linkTemplate = toFragment` -