From daa924bed4ffc6a74ed3e547bef36a6448d6f307 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 11 Sep 2024 18:01:08 -0700
Subject: [PATCH 1/3] Add active styling for nav item

---
 src/lib/holocene/navigation/navigation-item.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/lib/holocene/navigation/navigation-item.svelte b/src/lib/holocene/navigation/navigation-item.svelte
index 18a7fbf75..d81ca3d22 100644
--- 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,6 +13,7 @@
   export let external = false;
   export let animate = false;
   export let disabled = false;
+  export let isActive: (path: string | undefined) => boolean = () => false;
 
   $: rel = external ? 'noopener noreferrer' : '';
   $: target = external ? '_blank' : '';
@@ -29,7 +32,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={isActive($page.url.href)}
+    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 +57,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>

From e58114655ef2dc5a08fb02041144d5b717dfe448 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 12 Sep 2024 10:14:13 -0700
Subject: [PATCH 2/3] Add isActive check for nav links

---
 src/lib/components/side-nav.svelte            |  1 +
 .../navigation/navigation-item.svelte         |  2 +-
 src/lib/types/global.ts                       |  1 +
 src/routes/(app)/+layout.svelte               | 36 +++++++++++++++----
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/side-nav.svelte b/src/lib/components/side-nav.svelte
index 1e2998592..ba117d276 100644
--- 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
index d81ca3d22..a85789b9d 100644
--- 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
index 8b48664c5..7deed3b06 100644
--- 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
index a00d9e7c9..1b2e29136 100644
--- 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',

From 79b803a6370752e13cf6ac819584aa5d7cb3edb3 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 12 Sep 2024 12:01:33 -0700
Subject: [PATCH 3/3] Account for if isActive is undefined

---
 src/lib/holocene/navigation/navigation-item.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/holocene/navigation/navigation-item.svelte b/src/lib/holocene/navigation/navigation-item.svelte
index a85789b9d..944d3c01b 100644
--- a/src/lib/holocene/navigation/navigation-item.svelte
+++ b/src/lib/holocene/navigation/navigation-item.svelte
@@ -13,10 +13,11 @@
   export let external = false;
   export let animate = false;
   export let disabled = false;
-  export let isActive: (path: string) => boolean = () => false;
+  export let isActive: (path: string) => boolean | undefined = undefined;
 
   $: rel = external ? 'noopener noreferrer' : '';
   $: target = external ? '_blank' : '';
+  $: active = isActive && isActive($page.url.href);
 </script>
 
 <div
@@ -32,7 +33,7 @@
     aria-disabled={disabled}
     class:disabled
     tabindex={disabled ? -1 : 0}
-    class:active={isActive($page.url.href)}
+    class:active
     class="mb-1 flex items-center whitespace-nowrap rounded-lg p-1 pl-2 text-sm font-medium"
     class:text-disabled={disabled}
   >