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 18a7fbf75..944d3c01b 100644
--- a/src/lib/holocene/navigation/navigation-item.svelte
+++ b/src/lib/holocene/navigation/navigation-item.svelte
@@ -1,4 +1,6 @@
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',