diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss index e0f2acc0624adc698781c7d004c45bc64af5596b..df0cb587a57c704a15fb038f9bf816f54cb1e115 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss +++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss @@ -72,6 +72,9 @@ right: 0; width: 100%; } + &--is-active-trail--disabled::after { + border: none; + } } hy-icon { diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx index 6d450fd2be94a2a88665a27960fd2a486a2f7915..3e7ac2be0ca0a9dc89dc12b79bf7105fb4374c28 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx +++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx @@ -91,6 +91,14 @@ export class HyDesktopMenuLinks { } activeMenuItemSibling.setAttribute('aria-hidden', 'false'); + //Hide is-active-trail underlining + const activeTrailMenuItem = this.el.shadowRoot.querySelector( + `.desktop-menu-link__label--is-active-trail` + ) as HTMLElement; + if (activeTrailMenuItem) { + activeTrailMenuItem.classList.add('desktop-menu-link__label--is-active-trail--disabled'); + } + // Add panels top value automatically with the correct header height const headerHeight = `${ this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset @@ -141,6 +149,14 @@ export class HyDesktopMenuLinks { // Return focus to the button of the last desktop panel that was active. if (activeMenuItem !== null) activeMenuItem.focus(); + //Show is-active-trail underlining + const activeTrailMenuItem = this.el.shadowRoot.querySelector( + `.desktop-menu-link__label--is-active-trail` + ) as HTMLElement; + if (activeTrailMenuItem) { + activeTrailMenuItem.classList.remove('desktop-menu-link__label--is-active-trail--disabled'); + } + // Reset elements by removing the active classes. menuItems.forEach((item) => { item.classList.remove('desktop-menu-link--is-active');