PROD-3511 - add active & hover state for the "mega menu"

Author: vas3a

src/lib/components/LinksMenu.module.scss

@@ -12,7 +12,7 @@
       content: "";
       display: block;
       position: absolute;
-      top: -18px;
+      top: -12px;
       bottom: -18px;
       left: -16px;
       right: -16px;

src/lib/marketing-navigation/MarketingNavigation.svelte

@@ -50,6 +50,7 @@
   {#if !$isMobile}
     {#if primaryRoute?.children?.length}
       <NavigationBar
+        activeRoutePath={activeRoute}
         activeRoute={secondaryRoute}
         style='secondary'
         menuItems={primaryRoute.children}
@@ -58,6 +59,7 @@
 
     {#if secondaryRoute?.children?.length}
       <NavigationBar
+        activeRoutePath={activeRoute}
         activeRoute={tertiaryRoute}
         style='tertiary'
         menuItems={secondaryRoute.children}

src/lib/marketing-navigation/components/HoverMenu.module.scss

@@ -83,6 +83,12 @@ a.menuSectionHeading {
   line-height: 22px;
   font-weight: 700;
   cursor: pointer;
+  &:hover {
+    color: #2A2A2A;
+  }
+  &:global(.active), &:active {
+    color: #0D664E;
+  }
 }
 
 .menuSectionDesc {
@@ -100,6 +106,12 @@ a.menuSectionChild {
   font-weight: 500;
   color: #767676;
   cursor: pointer;
+  &:hover {
+    color: #2A2A2A;
+  }
+  &:global(.active), &:active {
+    color: #0D664E;
+  }
 }
 
 a.ctaButton {

src/lib/marketing-navigation/components/HoverMenu.svelte

@@ -6,6 +6,7 @@
   export let mainDescription = '';
   export let menuItems: NavMenuItem[] = [];
   export let isHovering: boolean = false;
+  export let activeRoute: NavMenuItem = undefined;
 
   let elWrap: HTMLElement | undefined;
 
@@ -40,6 +41,7 @@
               {#if !!menuItem.label}
                 <a
                   class={styles.menuSectionHeading}
+                  class:active={activeRoute?.url === menuItem.url}
                   target="_top"
                   href={menuItem.url}
                 >
@@ -56,6 +58,7 @@
                       <li>
                         <a
                           class={styles.menuSectionChild}
+                          class:active={activeRoute?.url === child.url}
                           target="_top"
                           href={child.url}
                         >{child.label}</a>

src/lib/marketing-navigation/components/NavigationBar.svelte

@@ -33,6 +33,7 @@
     >
         {#if !activeRoute}
             <HoverMenu
+                activeRoute={activeRoutePath[3] ?? activeRoutePath[2]}
                 menuItems={hoveredMenuItem?.children}
                 mainDescription={hoveredMenuItem?.description}
                 bind:isHovering={popupIsVisible}