quick fixes for hover & active states

src/lib/app-context/navigation-handler.model.ts

@@ -2,4 +2,4 @@
 // but we removed the path property from the model and
 // made the url property required. So for backwards compatibility
 // we need to leave the property named path.
-export type NavigationHandler = (route: { label: string, path: string }) => void
+export type NavigationHandler = (route: { label: string, path: string, isMarketingUrl?: boolean }) => void

src/lib/components/LinksMenu.svelte

@@ -45,10 +45,10 @@
     )
   }
 
-  function handleNavigation(ev: MouseEvent) {
+  function handleNavigation(ev: MouseEvent, menuItem: NavMenuItem) {
     if (typeof navigationHandler === 'function') {
       ev.preventDefault()
-      navigationHandler({label: '', path: (ev.target as HTMLAnchorElement).href});
+      navigationHandler({label: '', path: menuItem.url, isMarketingUrl: !!menuItem.marketingPathname});
     }
   }
 </script>
@@ -60,13 +60,13 @@
       <a
         class={getNavItemClassNames(menuItem)}
         class:active={isActiveMenu(menuItem, activeRoute)}
-        class:hover={isPopupMenuActive && hoveredMenuItem?.url === menuItem.url}
+        class:hover={isPopupMenuActive && hoveredMenuItem?.label === menuItem.label}
         href={menuItem.url}
         target={menuItem.target ?? '_top'}
         data-key={menuItem.url}
         on:mouseover={handleMouseover(menuItem)}
         on:focus={handleMouseover(menuItem)}
-        on:click={handleNavigation}
+        on:click={(ev) => handleNavigation(ev, menuItem)}
       >
         {menuItem.label}
         {#if itemHasHoverMenu(menuItem)}

src/lib/components/SubMenu.svelte

@@ -24,10 +24,10 @@
     }
   })
 
-  function handleNavigation(ev: MouseEvent) {
+  function handleNavigation(ev: MouseEvent, menuItem: NavMenuItem) {
     if (typeof navigationHandler === 'function') {
       ev.preventDefault()
-      navigationHandler({label: '', path: (ev.target as HTMLAnchorElement).href});
+      navigationHandler({label: '', path: menuItem.url, isMarketingUrl: !!menuItem.marketingPathname});
     }
   }
 </script>
@@ -41,7 +41,7 @@
         class:active={activeRoute?.url === menuItem.url}
         target={menuItem.target ?? '_top'}
         href={menuItem.url}
-        on:click={handleNavigation}
+        on:click={(ev) => handleNavigation(ev, menuItem)}
       >
         {menuItem.label}
       </a>

src/lib/components/user-area/UserArea.svelte

@@ -8,7 +8,6 @@
   import { DISABLE_NUDGES } from "lib/config/profile-toasts.config";
 
   import ToolSelector from '../tool-selector/ToolSelector.svelte';
-  import VerticalSeparator from '../VerticalSeparator.svelte';
 
   import UserAvatar from './UserAvatar.svelte';
   import styles from './UserArea.module.scss'

src/lib/marketing-navigation/MarketingNavigation.svelte

@@ -24,7 +24,7 @@
   $: menuItems = customMenuItems ?? getMainNavItems(isAuthenticated)
 
   let activeRoute: NavMenuItem[] = [];
-  $: activeRoute = getActiveRoute(menuItems, 0, $windowLocation)
+  $: activeRoute = getActiveRoute(menuItems, undefined, $windowLocation)
 
   let primaryRoute: NavMenuItem;
   let secondaryRoute: NavMenuItem;

types/src/lib/app-context/navigation-handler.model.d.ts

@@ -1,4 +1,5 @@
 export declare type NavigationHandler = (route: {
     label: string;
     path: string;
+    isMarketingUrl?: boolean;
 }) => void;