desktop menu panel behaviour

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -235,6 +235,7 @@ export class HyDesktopMenuLinks {
     let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
     const headerHeight = hyHeader.offsetTop + hyHeader.offsetHeight;
 
+    console.log('leave ' + leaveEvent.clientY + ' ' + headerHeight);
     if (leaveEvent.clientY < headerHeight - 4) {
       this.closePanel();
     }
@@ -242,22 +243,28 @@ export class HyDesktopMenuLinks {
     event.stopPropagation();
   }
 
+  /*
+    Close the panel if mouse is moving over the menu label.
+  * */
   handleDesktopMenuMove(event, id) {
-    let toggleEvent = event as MouseEvent;
-
-    const activeMenuItem = this.el.shadowRoot.querySelector(
-      `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label`
-    ) as HTMLElement;
-    let topBorder = activeMenuItem.getClientRects()[0].top;
-
-    if (this.currenOpenMenuId == id) {
-      // Mouse moving around the same menu link
-      if (toggleEvent.clientY < topBorder) {
-        this.closePanel();
+    if (this.isDesktopMenuOpen) {
+      let moveEvent = event as MouseEvent;
+
+      const activeMenuItem = this.el.shadowRoot.querySelector(
+        `.desktop-menu-link[link-id="${id}"] .desktop-menu-link__label`
+      ) as HTMLElement;
+      let topBorder = activeMenuItem.getClientRects()[0].top;
+
+      if (this.currenOpenMenuId == id) {
+        // Mouse moving around the same menu link
+        if (moveEvent.clientY < topBorder - 8) {
+          console.log(topBorder + ' ' + moveEvent.clientY);
+          this.closePanel();
+        }
       }
-    }
 
-    event.stopPropagation();
+      event.stopPropagation();
+    }
   }
 
   handleDesktopMenuFocus(event, id) {
@@ -322,18 +329,13 @@ export class HyDesktopMenuLinks {
                 onMouseDown={(e) => this.handleDesktopMenuClick(e, id)}
                 onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
                 onMouseEnter={(e) => this.handleDesktopMenuEnter(e, id)}
-                onMouseLeave={(e) => this.handleDesktopMenuLeave(e)}
                 onMouseMove={(e) => this.handleDesktopMenuMove(e, id)}
                 aria-expanded="false"
               >
                 <span class={classAttributesLabel}>{label}</span>
                 <hy-icon icon={'hy-icon-caret-down'} size={32} />
               </button>
-              <div
-                class="hy-desktop-menu-panel"
-                onMouseLeave={(e) => this.handleDesktopMenuClose(e)}
-                aria-hidden="true"
-              >
+              <div class="hy-desktop-menu-panel" aria-hidden="true">
                 <div class="hy-desktop-menu-panel__desktop-menu">
                   <div class="hy-desktop-menu-panel__desktop-menu__menu-items">
                     <a
@@ -418,7 +420,11 @@ export class HyDesktopMenuLinks {
 
   render() {
     return (
-      <nav role={'navigation'} class="hy-site-header__menu-desktop">
+      <nav
+        role={'navigation'}
+        class="hy-site-header__menu-desktop"
+        onMouseLeave={(e) => this.handleDesktopMenuClose(e)}
+      >
         <ul class="hy-site-header__menu-desktop-container">{this.menuLinkItems}</ul>
       </nav>
     );