closing menu panel

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

@@ -67,7 +67,6 @@ export class HyDesktopMenuLinks {
   }
 
   showPanel(id) {
-    console.log('show panel');
     const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
     const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel'); // all panels
     const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement;
@@ -127,6 +126,13 @@ export class HyDesktopMenuLinks {
     }
   }
 
+  closePanel() {
+    this.isDesktopMenuOpen = false;
+    this.currenOpenMenuId = 0;
+    this.showBackdropShadow();
+    this.clearPanelItemsStatus();
+  }
+
   clearPanelItemsStatus() {
     const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
     const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
@@ -147,31 +153,56 @@ export class HyDesktopMenuLinks {
   }
 
   handleDesktopMenuClose(event) {
-    console.log(event.type);
+    this.closePanel();
 
-    this.isDesktopMenuOpen = false;
-    this.currenOpenMenuId = 0;
-    this.showBackdropShadow();
-    this.clearPanelItemsStatus();
+    event.stopPropagation();
+  }
+
+  handleDesktopMenuLeave(event) {
+    let leaveEvent = event as MouseEvent;
+    let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
+    const headerHeight = hyHeader.offsetTop + hyHeader.offsetHeight;
+
+    if (leaveEvent.clientY < headerHeight - 4) {
+      this.closePanel();
+    }
 
     event.stopPropagation();
   }
 
   handleDesktopMenuToggle(event, id) {
-    console.log(event.type);
+    let toggleEvent = event as MouseEvent;
 
-    this.isDesktopMenuOpen = true;
+    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) {
       this.currenOpenMenuId = id;
-      this.showPanel(id);
+
+      if (toggleEvent.clientY < topBorder) {
+        this.closePanel();
+      } else {
+        this.isDesktopMenuOpen = true;
+        this.showPanel(id);
+      }
+    } else {
+      // Mouse moving around the same menu link
+      if (toggleEvent.clientY < topBorder) {
+        this.closePanel();
+      } else {
+        if (!this.isDesktopMenuOpen) {
+          this.isDesktopMenuOpen = true;
+          this.showPanel(id);
+        }
+      }
     }
 
     event.stopPropagation();
   }
 
   handleDesktopMenuFocus(event, id) {
-    console.log(event.type);
     if (this.isDesktopMenuOpen && this.currenOpenMenuId != id) {
       this.currenOpenMenuId = id;
       this.showPanel(id);
@@ -181,8 +212,6 @@ export class HyDesktopMenuLinks {
   }
 
   handleDesktopMenuClick(event, id) {
-    console.log(event.type);
-
     this.isDesktopMenuOpen = !this.isDesktopMenuOpen;
     if (!this.isDesktopMenuOpen) {
       this.handleDesktopMenuClose(event);
@@ -234,7 +263,9 @@ export class HyDesktopMenuLinks {
                 class={classAttributes}
                 link-id={id}
                 onClick={(e) => this.handleDesktopMenuClick(e, id)}
-                onMouseOver={(e) => this.handleDesktopMenuToggle(e, id)}
+                //onMouseOver={(e) => this.handleDesktopMenuToggle(e, id)}
+                onMouseMove={(e) => this.handleDesktopMenuToggle(e, id)}
+                onMouseLeave={(e) => this.handleDesktopMenuLeave(e)}
                 onFocus={(e) => this.handleDesktopMenuFocus(e, id)}
                 aria-expanded="false"
               >