Add isActive check for nav links

temporalio · Sep 12, 2024 · e581146 · e581146
1 parent daa924b
commit e581146
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/src/lib/components/side-nav.svelte b/src/lib/components/side-nav.svelte
@@ -23,6 +23,7 @@
         tooltip={item?.tooltip || item.label}
         external={item?.external}
         animate={item?.animate}
+        isActive={item.isActive}
       />
     {/if}
   {/each}

diff --git a/src/lib/holocene/navigation/navigation-item.svelte b/src/lib/holocene/navigation/navigation-item.svelte
@@ -13,7 +13,7 @@
   export let external = false;
   export let animate = false;
   export let disabled = false;
-  export let isActive: (path: string | undefined) => boolean = () => false;
+  export let isActive: (path: string) => boolean = () => false;
 
   $: rel = external ? 'noopener noreferrer' : '';
   $: target = external ? '_blank' : '';

diff --git a/src/lib/types/global.ts b/src/lib/types/global.ts
@@ -147,4 +147,5 @@ export type NavLinkListItem = {
   enabled?: boolean;
   hidden?: boolean;
   animate?: boolean;
+  isActive?: (path: string) => boolean;
 };
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -56,45 +56,67 @@
     namespace: string,
     inProgressBatch: boolean,
   ): NavLinkListItem[] => {
+    const workflowsRoute = routeForWorkflows({ namespace });
+    const schedulesRoute = routeForSchedules({ namespace });
+    const batchOperationsRoute = routeForBatchOperations({ namespace });
+    const archivalRoute = routeForArchivalWorkfows({ namespace });
+    const namespacesRoute = routeForNamespaces();
+    const nexusRoute = routeForNexus();
+    const historyImportRoute = routeForEventHistoryImport();
+
     return [
       {
-        href: routeForWorkflows({ namespace }),
+        href: workflowsRoute,
         icon: 'workflow',
         label: translate('common.workflows'),
+        isActive: (path) => Boolean(path.includes(workflowsRoute)),
       },
       {
-        href: routeForSchedules({ namespace }),
+        href: schedulesRoute,
         icon: 'schedules',
         label: translate('common.schedules'),
+        isActive: (path) => Boolean(path.includes(schedulesRoute)),
       },
       {
-        href: routeForBatchOperations({ namespace }),
+        href: batchOperationsRoute,
         icon: 'batch-operation',
         label: translate('batch.nav-title'),
         tooltip: translate('batch.list-page-title'),
         animate: inProgressBatch,
+        isActive: (path) => Boolean(path.includes(batchOperationsRoute)),
       },
       {
-        href: routeForArchivalWorkfows({ namespace }),
+        href: archivalRoute,
         icon: 'archives',
         label: translate('common.archive'),
+        isActive: (path) => Boolean(path.includes(archivalRoute)),
       },
       {
-        href: routeForNamespaces(),
+        href: namespacesRoute,
         icon: 'namespace',
         label: translate('common.namespaces'),
         divider: true,
+        isActive: (path) =>
+          Boolean(
+            path.includes(namespacesRoute) &&
+              !path.includes(workflowsRoute) &&
+              !path.includes(schedulesRoute) &&
+              !path.includes(batchOperationsRoute) &&
+              !path.includes(archivalRoute),
+          ),
       },
       {
-        href: routeForNexus(),
+        href: nexusRoute,
         icon: 'nexus',
         label: translate('nexus.nexus'),
         hidden: !$page.data?.systemInfo?.capabilities?.nexus,
+        isActive: (path) => Boolean(path.includes(nexusRoute)),
       },
       {
-        href: routeForEventHistoryImport(),
+        href: historyImportRoute,
         icon: 'import',
         label: translate('common.import'),
+        isActive: (path) => Boolean(path.includes(historyImportRoute)),
       },
       {
         href: 'http://docs.temporal.io',