Highlight active link in nav bar (#2324)

* Add active styling for nav item * Add isActive check for nav links * Account for if isActive is undefined
temporalio · Sep 12, 2024 · bd34e6e · bd34e6e
1 parent 68a514d
commit bd34e6e
Show file tree

Hide file tree

Showing 4 changed files with 42 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
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { page } from '$app/stores';
+
   import type { IconName } from '$lib/holocene/icon';
   import { navOpen } from '$lib/stores/nav-open';
 
@@ -11,9 +13,11 @@
   export let external = false;
   export let animate = false;
   export let disabled = false;
+  export let isActive: (path: string) => boolean | undefined = undefined;
 
   $: rel = external ? 'noopener noreferrer' : '';
   $: target = external ? '_blank' : '';
+  $: active = isActive && isActive($page.url.href);
 </script>
 
 <div
@@ -29,7 +33,8 @@
     aria-disabled={disabled}
     class:disabled
     tabindex={disabled ? -1 : 0}
-    class="mb-1 flex items-center whitespace-nowrap rounded-lg p-1 pl-2 text-sm font-medium hover:bg-white hover:text-black group-[.surface-primary]:hover:bg-black group-[.surface-primary]:hover:text-white group-[.surface-primary]:dark:hover:bg-white group-[.surface-primary]:dark:hover:text-black"
+    class:active
+    class="mb-1 flex items-center whitespace-nowrap rounded-lg p-1 pl-2 text-sm font-medium"
     class:text-disabled={disabled}
   >
     <div
@@ -53,4 +58,9 @@
   a.disabled {
     @apply pointer-events-none cursor-not-allowed opacity-50;
   }
+
+  a:hover,
+  a.active {
+    @apply bg-white text-black group-[.surface-primary]:bg-black group-[.surface-primary]:text-white group-[.surface-primary]:dark:bg-white group-[.surface-primary]:dark:text-black;
+  }
 </style>
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',