shadow should not stay on page when the desktop menu panel is closed

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

@@ -37,6 +37,7 @@ export class HyDesktopMenuLinks {
   @State() menuLinkItems: Array<object> = [];
   @State() hasToolbar: boolean = false;
   @State() isDesktopMenuOpen: boolean = false;
+  @State() currenOpenMenuId: number = 0;
 
   private _submenuLeftMargin: number = 32;
   private _headerBorderOffset: number = 0;
@@ -51,11 +52,6 @@ export class HyDesktopMenuLinks {
   }
 
   showBackdropShadow(state = 'close', top = 0) {
-    if (state === 'open') {
-    }
-    if (top == 0) {
-    }
-    /*
     let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
     let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
 
@@ -63,42 +59,15 @@ export class HyDesktopMenuLinks {
       if (state === 'open') {
         hyBackdropDiv.classList.add('is-active');
         hyBackdropDiv.style.top = `${top}px`;
-      }
-
-      if (state === 'close') {
-        hyBackdropDiv.classList.remove('is-active');
+      } else {
         hyBackdropDiv.style.top = '0';
+        hyBackdropDiv.classList.remove('is-active');
       }
     }
-    */
-  }
-
-  handleDesktopMenuClose() {
-    /*
-    this.isDesktopMenuOpen = false;
-    this.showBackdropShadow();
-
-    const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
-    const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
-    const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[aria-expanded="true"]`) as HTMLElement;
-
-    // Return focus to the button of the last desktop panel that was active.
-    if (activeMenuItem !== null) activeMenuItem.focus();
-
-    // Reset elements by removing the active classes.
-    menuItems.forEach((item) => {
-      item.classList.remove('desktop-menu-link--is-active');
-      item.setAttribute('aria-expanded', 'false');
-    });
-    menuPanelItems.forEach((item) => {
-      item.classList.remove('hy-desktop-menu-panel--is-active');
-      item.setAttribute('aria-hidden', 'true');
-    });
-    */
   }
 
-  handleDesktopMenuToggle(id) {
-    this.isDesktopMenuOpen = true;
+  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;
@@ -138,8 +107,6 @@ export class HyDesktopMenuLinks {
     const menuPanelLeftPosition = activeButtonRect.left - this._submenuLeftMargin;
     activeMenuItemSibling.style.paddingLeft = `${menuPanelLeftPosition}px`;
 
-    // @todo Position underline block under the activated top menu item.
-
     // Position shortcuts block.
     let shortcutsDiv = activeMenuItemSibling.querySelectorAll('ul.shortcuts-panel')[0] as HTMLElement; // shortcuts block
     if (shortcutsDiv) {
@@ -160,41 +127,71 @@ export class HyDesktopMenuLinks {
     }
   }
 
-  handleDesktopMenuClick(id) {
-    console.log(id);
-    /*
-    const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
-    const activeMenuItemSibling = activeMenuItem.nextElementSibling as HTMLElement; // current panel
+  clearPanelItemsStatus() {
+    const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
+    const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
+    const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[aria-expanded="true"]`) as HTMLElement;
 
-    if (!this.isDesktopMenuOpen) {
-      // Add active classes to the currently active item and its sibling element.
-      this.isDesktopMenuOpen = true;
-      activeMenuItem.classList.add('desktop-menu-link--is-active');
-      activeMenuItem.setAttribute('aria-expanded', 'true');
-      activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active');
-
-      if (this.hasToolbar) {
-        activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active--has-toolbar');
-      }
-      activeMenuItemSibling.setAttribute('aria-hidden', 'false');
+    // Return focus to the button of the last desktop panel that was active.
+    if (activeMenuItem !== null) activeMenuItem.focus();
 
-      let rect = activeMenuItemSibling.getBoundingClientRect();
-      this.showBackdropShadow('open', rect.bottom);
-    } else {
-      // Remove active classes to the currently active item and its sibling element.
-      this.isDesktopMenuOpen = false;
-      activeMenuItem.classList.remove('desktop-menu-link--is-active');
-      activeMenuItem.setAttribute('aria-expanded', 'false');
-      activeMenuItemSibling.classList.remove('hy-desktop-menu-panel--is-active');
-      if (this.hasToolbar) {
-        activeMenuItemSibling.classList.remove('hy-desktop-menu-panel--is-active--has-toolbar');
-      }
+    // Reset elements by removing the active classes.
+    menuItems.forEach((item) => {
+      item.classList.remove('desktop-menu-link--is-active');
+      item.setAttribute('aria-expanded', 'false');
+    });
+    menuPanelItems.forEach((item) => {
+      item.classList.remove('hy-desktop-menu-panel--is-active');
+      item.setAttribute('aria-hidden', 'true');
+    });
+  }
 
-      activeMenuItemSibling.setAttribute('aria-hidden', 'true');
+  handleDesktopMenuClose(event) {
+    console.log(event.type);
 
-      this.showBackdropShadow();
+    this.isDesktopMenuOpen = false;
+    this.currenOpenMenuId = 0;
+    this.showBackdropShadow();
+    this.clearPanelItemsStatus();
+
+    event.stopPropagation();
+  }
+
+  handleDesktopMenuToggle(event, id) {
+    console.log(event.type);
+
+    this.isDesktopMenuOpen = true;
+
+    if (this.currenOpenMenuId != id) {
+      this.currenOpenMenuId = id;
+      this.showPanel(id);
     }
-     */
+
+    event.stopPropagation();
+  }
+
+  handleDesktopMenuFocus(event, id) {
+    console.log(event.type);
+    if (this.isDesktopMenuOpen && this.currenOpenMenuId != id) {
+      this.currenOpenMenuId = id;
+      this.showPanel(id);
+    }
+
+    event.stopPropagation();
+  }
+
+  handleDesktopMenuClick(event, id) {
+    console.log(event.type);
+
+    this.isDesktopMenuOpen = !this.isDesktopMenuOpen;
+    if (!this.isDesktopMenuOpen) {
+      this.handleDesktopMenuClose(event);
+    } else {
+      this.currenOpenMenuId = id;
+      this.showPanel(id);
+    }
+
+    event.stopPropagation();
   }
 
   componentDidLoad() {
@@ -236,15 +233,19 @@ export class HyDesktopMenuLinks {
                 type="button"
                 class={classAttributes}
                 link-id={id}
-                onClick={() => this.handleDesktopMenuClick(id)}
-                onMouseOver={() => this.handleDesktopMenuToggle(id)}
-                onFocus={() => this.handleDesktopMenuToggle(id)}
+                onClick={(e) => this.handleDesktopMenuClick(e, id)}
+                onMouseOver={(e) => this.handleDesktopMenuToggle(e, id)}
+                onFocus={(e) => this.handleDesktopMenuFocus(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={() => this.handleDesktopMenuClose()} aria-hidden="true">
+              <div
+                class="hy-desktop-menu-panel"
+                onMouseLeave={(e) => this.handleDesktopMenuClose(e)}
+                aria-hidden="true"
+              >
                 <div class="hy-desktop-menu-panel__desktop-menu">
                   <div class="hy-desktop-menu-panel__desktop-menu__menu-items">
                     <a
@@ -306,7 +307,7 @@ export class HyDesktopMenuLinks {
                   )}
                 </div>
                 <button
-                  onClick={() => this.handleDesktopMenuClose()}
+                  onClick={(e) => this.handleDesktopMenuClose(e)}
                   class={{
                     'hy-desktop-menu-panel__panel-toggle': true,
                   }}