Merge pull request #86 from topcoder-platform/PROD-3391_mobile-nav

PROD-3391 - mobile nav - remove sub menus for tool navs

Author: brooketopcoder

src/lib/components/Accordion.svelte

@@ -41,9 +41,11 @@
           >
             {item.label}
           </a>
-          <span class={styles.itemTrigger} on:click={() => toggleItem(item)} on:keydown={() => {}}>
-            <img src={iconUrl} alt="^" />
-          </span>
+          {#if item.children?.length}
+            <span class={styles.itemTrigger} on:click={() => toggleItem(item)} on:keydown={() => {}}>
+              <img src={iconUrl} alt="^" />
+            </span>
+          {/if}
         </div>
       {:else}
         <a class={styles.navButton} href={navUrl(item)}>

src/lib/functions/marketing-navigation.provider.ts

@@ -9,6 +9,6 @@ export function getMainNavItems(isAuthenticated: boolean): NavMenuItem[] {
   return activateAuthenticatedRoutes(isAuthenticated, menu);
 }
 
-export function getActiveRoute(index?: number): NavMenuItem[] {
-  return getActiveRouteUtil(navMenu, index);
+export function getActiveRoute(navItems: NavMenuItem[], index?: number): NavMenuItem[] {
+  return getActiveRouteUtil(navItems, index);
 }

src/lib/marketing-navigation/MarketingNavigation.svelte

@@ -21,14 +21,16 @@
   let menuItems: NavMenuItem[];
   $: menuItems = getMainNavItems(isAuthenticated)
 
-  const activeRoute: NavMenuItem[] = getActiveRoute()
+  let activeRoute: NavMenuItem[] = [];
+  $: activeRoute = getActiveRoute(menuItems)
   const [primaryRoute, secondaryRoute, tertiaryRoute] = activeRoute
 
   onMount(checkAndLoadFonts)
 </script>
 
 <div class="tc-universal-nav-wrap">
   <NavigationBar
+    activeRoutePath={activeRoute}
     activeRoute={primaryRoute}
     style='primary'
     menuItems={menuItems}

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

@@ -7,6 +7,7 @@
 
     export let style: 'primary'|'secondary'|'tertiary';
     export let menuItems: NavMenuItem[] = [];
+    export let activeRoutePath: NavMenuItem[] = [];
     export let activeRoute: NavMenuItem;
     export let isMobile: boolean = false;
 
@@ -17,7 +18,10 @@
 
 <TopNavbar style={style} minLogoVersion={isMobile}>
   {#if isMobile}
-    <MobileNavigation />
+    <MobileNavigation
+      menuItems={menuItems}
+      activeRoutes={activeRoutePath}
+    />
   {:else}
     <LinksMenu
         menuItems={menuItems}

src/lib/mobile-navigation/MobileNavigation.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
   import type { NavMenuItem } from 'lib/functions/nav-menu-item.model';
-  import { getActiveRoute, getMainNavItems } from 'lib/functions/marketing-navigation.provider'
   import MobileMenu from 'lib/components/MobileMenu.svelte';
   import Accordion from 'lib/components/Accordion.svelte';
   import { getPublicPath, navUrl } from 'lib/utils/paths';
   import { classnames } from 'lib/utils/classnames';
 
   import styles from './MobileNavigation.module.scss';
 
-  const menuItems = getMainNavItems()
-  const activeRoutes: NavMenuItem[] = getActiveRoute()
+  export let menuItems: NavMenuItem[];
+  export let activeRoutes: NavMenuItem[] = [];
   const toggleMenuIcon = getPublicPath(`/assets/icon-menu.svg`);
 
   let menuIsVisible = false;

src/lib/tool-navigation/ToolNavigation.svelte

@@ -55,7 +55,9 @@
 
 <TopNavbar minLogoVersion class={styles.navbar} style="primary">
   {#if $isMobile}
-    <MobileNavigation />
+    <MobileNavigation
+      menuItems={menuItems}
+    />
   {:else}
     <LinksMenu
       menuItems={menuItems}

src/lib/utils/routes.ts

@@ -65,8 +65,8 @@ export const matchRoutes = (navMenu: NavMenuItem, path: string): NavMenuItem[] =
  * @param trailLevel The trail level of the active route to return
  * @returns
  */
-export function getActiveRoute(navMenu: NavMenuItem, trailLevel?: number): NavMenuItem[] {
+export function getActiveRoute(navMenuItems: NavMenuItem[], trailLevel?: number): NavMenuItem[] {
   const locationHref = `${location.pathname}`
-  const activeRouteTrail = [].concat(matchRoutes(navMenu, locationHref))
+  const activeRouteTrail = [].concat(matchRoutes({children: navMenuItems} as NavMenuItem, locationHref))
   return typeof trailLevel === 'number' ? activeRouteTrail?.slice(trailLevel, 1) : activeRouteTrail
 }