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 baa2ac724c2d57a3947b4cf02e72718a4803a809..be6bb1781b1019aa7b63d41c180124c14e010781 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 @@ -42,6 +42,8 @@ export class HyDesktopMenuLinks { private _submenuLeftMargin: number = 32; private _headerBorderOffset: number = 0; + private _hoverTimer = null; + @Watch('dataDesktopLinks') dataDesktopLinksWatcher(data: DesktopLinks[] | string) { this._dataDesktopLinks = typeof data === 'string' ? JSON.parse(data) : data; @@ -116,6 +118,17 @@ export class HyDesktopMenuLinks { let rect = activeMenuItemSibling.getBoundingClientRect(); this.showBackdropShadow('open', rect.bottom); + /* + if (this.el.parentElement.classList.contains('hy-site-header--sticky-active')) { + console.log(rect.top + ' ' + rect.height + ' ' + rect.bottom) ; + this.showBackdropShadow('open', parseInt(headerHeight)+rect.height); + } + else { + console.log(rect.top + ' ' + rect.height + ' ' + rect.bottom) ; + this.showBackdropShadow('open', rect.bottom); + } + */ + // Position submenu block under the activated top menu item. let activeButtonRect = activeMenuItem.getBoundingClientRect(); const menuPanelLeftPosition = activeButtonRect.left - this._submenuLeftMargin; @@ -182,13 +195,15 @@ export class HyDesktopMenuLinks { } handleDesktopMenuEnter(event, id) { - const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement; + this._hoverTimer = setTimeout(() => { + const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement; - // Set focus to the button. - if (activeMenuItem !== null) activeMenuItem.focus(); + // Set focus to the button. + if (activeMenuItem !== null) activeMenuItem.focus(); - this.currenOpenMenuId = id; - this.showPanel(id); + this.currenOpenMenuId = id; + this.showPanel(id); + }, 350); event.stopPropagation(); } @@ -201,6 +216,7 @@ export class HyDesktopMenuLinks { if (leaveEvent.clientY < headerHeight - 4) { this.closePanel(); + clearTimeout(this._hoverTimer); } event.stopPropagation();