fadeout fixes

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

@@ -28,6 +28,7 @@
       display: flex;
       height: 100%;
     }
+
     // First level menu items
     .desktop-menu-link {
       background-color: transparent;
@@ -97,7 +98,6 @@
 
       // On hover: heading icon is turned 180deg and grows bigger.
       &--is-active {
-        //color: var(--link-blue);
         position: relative;
         &:hover,
         &:focus {
@@ -135,20 +135,21 @@
 
     // Panel with second level menu items and shortcuts.
     .hy-desktop-menu-panel {
-      display: flex;
+      display: none;
       flex-direction: row;
       opacity: 0;
       transition: none;
       position: absolute;
       left: 0;
       top: 0;
+      z-index: 510;
+      width: 100%;
 
       &--is-active {
         background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
         box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.1) inset;
+        display: flex;
         padding-left: 300px;
-        width: 100%;
-        z-index: 510;
       }
 
       &__panel-toggle {

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

@@ -45,6 +45,7 @@ export class HyDesktopMenuLinks {
   private _headerBorderOffset: number = 0;
 
   private _hoverTimer = null;
+  private _fadeOutTimer = null;
 
   @Watch('dataDesktopLinks')
   dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
@@ -74,20 +75,7 @@ export class HyDesktopMenuLinks {
     // Close menu lang menu if it's open
     this.menuDesktopToggled.emit();
 
-    /*
-  @Listen('handleClick', {capture: true}) handleClick() {
-      this.menuContainerToggled.emit({
-        triggerItem: this.menuLinkId,
-        triggerType: 'add',
-      });
-      const currentParent = this.el.parentNode;
-      this.addBreadcrumb.emit({
-        url: this.url,
-        label: currentParent.parentElement.getAttribute('label'),
-        bid: this.menuLinkId,
-      });
-    }
-     */
+    clearTimeout(this._fadeOutTimer);
 
     // Open desktop menu panel
     this.isDesktopMenuOpen = true;
@@ -189,15 +177,24 @@ export class HyDesktopMenuLinks {
       item.setAttribute('aria-expanded', 'false');
     });
 
-    menuPanelItems.forEach((item) => {
-      item.classList.remove('hy-desktop-menu-panel--is-active');
-      item.setAttribute('aria-hidden', 'true');
-
-      (item as HTMLElement).style.opacity = '0';
-      if (fadeOut) {
+    if (fadeOut) {
+      menuPanelItems.forEach((item) => {
+        (item as HTMLElement).style.opacity = '0';
         (item as HTMLElement).style.transition = 'opacity 1s';
-      }
-    });
+      });
+
+      this._fadeOutTimer = setTimeout(() => {
+        menuPanelItems.forEach((item) => {
+          item.classList.remove('hy-desktop-menu-panel--is-active');
+          item.setAttribute('aria-hidden', 'true');
+        });
+      }, 2500);
+    } else {
+      menuPanelItems.forEach((item) => {
+        item.classList.remove('hy-desktop-menu-panel--is-active');
+        item.setAttribute('aria-hidden', 'true');
+      });
+    }
   }
 
   handleDesktopMenuClose(event) {