set timeout to show panel to make hover less sensitive

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();