fading out and delay effects on desktop menu panel

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

@@ -97,14 +97,19 @@
 
       // On hover: heading icon is turned 180deg and grows bigger.
       &--is-active {
-        color: var(--link-blue);
+        //color: var(--link-blue);
         position: relative;
+        &:hover {
+          color: var(--link-blue);
+          hy-icon {
+            svg {
+              fill: var(--link-blue);
+            }
+          }
+        }
 
         hy-icon {
           transform: rotateX(180deg);
-          svg {
-            fill: var(--link-blue);
-          }
         }
 
         .desktop-menu-link__label--is-active-trail::after {
@@ -129,16 +134,17 @@
 
     // Panel with second level menu items and shortcuts.
     .hy-desktop-menu-panel {
-      display: none;
+      display: flex;
+      flex-direction: row;
+      opacity: 0;
+      transition: none;
+      position: absolute;
+      left: 0;
+      top: 0;
 
       &--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;
-        flex-direction: row;
-        opacity: 1;
-        position: absolute;
-        left: 0;
         padding-left: 300px;
         width: 100%;
         z-index: 510;

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

@@ -88,12 +88,15 @@ export class HyDesktopMenuLinks {
     menuPanelItems.forEach((item) => {
       item.classList.remove('hy-desktop-menu-panel--is-active');
       item.setAttribute('aria-hidden', 'true');
+      (item as HTMLElement).style.transition = 'none';
     });
 
     // Add active classes to the currently active item and its sibling element.
     activeMenuItem.classList.add('desktop-menu-link--is-active');
     activeMenuItem.setAttribute('aria-expanded', 'true');
     activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active');
+    (activeMenuItemSibling as HTMLElement).style.opacity = '1';
+
     if (this.hasToolbar) {
       activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active--has-toolbar');
     }
@@ -118,17 +121,6 @@ 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;
@@ -154,20 +146,17 @@ export class HyDesktopMenuLinks {
     }
   }
 
-  closePanel() {
+  closePanel(fadeOut = false) {
     this.isDesktopMenuOpen = false;
     this.currenOpenMenuId = 0;
     this.showBackdropShadow();
-    this.clearPanelItemsStatus();
+    this.clearPanelItemsStatus(fadeOut);
+    clearTimeout(this._hoverTimer);
   }
 
-  clearPanelItemsStatus() {
+  clearPanelItemsStatus(fadeOut = false) {
     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();
 
     //Show is-active-trail underlining
     const activeTrailMenuItem = this.el.shadowRoot.querySelector(
@@ -182,14 +171,21 @@ export class HyDesktopMenuLinks {
       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');
+
+      (item as HTMLElement).style.opacity = '0';
+      if (fadeOut) {
+        (item as HTMLElement).style.transition = 'opacity 1s';
+      }
     });
   }
 
   handleDesktopMenuClose(event) {
-    this.closePanel();
+    let fadeOut = true;
+    this.closePanel(fadeOut);
 
     event.stopPropagation();
   }
@@ -216,7 +212,6 @@ export class HyDesktopMenuLinks {
 
     if (leaveEvent.clientY < headerHeight - 4) {
       this.closePanel();
-      clearTimeout(this._hoverTimer);
     }
 
     event.stopPropagation();