Merge pull request #116 from topcoder-platform/PROD-3560_hover-ux-update

PROD-3560 - update how we show hover menu -> dev

Author: brooketopcoder

src/lib/components/LinksMenu.svelte

@@ -17,10 +17,6 @@
     }
 
     const handleMouseover = (menuItem: NavMenuItem) => async (ev) => {
-        if (activeRoute) {
-            return;
-        }
-
         if (!itemHasHoverMenu(menuItem)) {
             return;
         }

src/lib/marketing-navigation/MarketingNavigation.svelte

@@ -40,6 +40,7 @@
     style='primary'
     menuItems={menuItems}
     isMobile={$isMobile}
+    showHoverMenu={!primaryRoute}
   >
     <svelte:fragment slot="auth">
       <AboutUsMenuItem />
@@ -54,6 +55,7 @@
         activeRoute={secondaryRoute}
         style='secondary'
         menuItems={primaryRoute.children}
+        showHoverMenu={!secondaryRoute?.children?.length}
       />
     {/if}
 

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

@@ -10,6 +10,7 @@
     export let activeRoutePath: NavMenuItem[] = [];
     export let activeRoute: NavMenuItem;
     export let isMobile: boolean = false;
+    export let showHoverMenu: boolean = true;
 
     let popupIsVisible: boolean;
     let hoveredElement: HTMLElement | undefined;
@@ -31,7 +32,7 @@
         isPopupMenuActive={popupIsVisible}
         style={style}
     >
-        {#if !activeRoute}
+        {#if showHoverMenu}
             <HoverMenu
                 activeRoute={activeRoutePath[3] ?? activeRoutePath[2]}
                 menuItems={hoveredMenuItem?.children}