From 67f9465ca2d3d01e01734c375d148a475517d07c Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Thu, 19 Feb 2026 00:11:38 +0100
Subject: [PATCH] fix active link on dashboard nav

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 frontend/src/lib/components/DashboardNav.svelte | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/DashboardNav.svelte b/frontend/src/lib/components/DashboardNav.svelte
index 73ef92a..020397e 100644
--- a/frontend/src/lib/components/DashboardNav.svelte
+++ b/frontend/src/lib/components/DashboardNav.svelte
@@ -2,14 +2,15 @@
 	import { page } from '$app/stores';
 
 	// determine active tab based on current route
-	$: currentPath = $page.url.pathname;
+	// normalize path to handle trailing slashes
+	$: currentPath = $page.url.pathname.replace(/\/$/, '') || '/';
 </script>
 
-<nav class="mb-6 border-b border-gray-200 dark:border-gray-700">
-	<div class="flex gap-6">
+<nav class="mt-4 mb-6 border-b border-gray-200 dark:border-gray-700">
+	<div class="flex">
 		<a
 			href="/dashboard"
-			class="px-1 py-3 text-sm font-medium border-b-2 transition-colors
+			class="px-6 py-3 text-sm font-medium border-b-2 transition-colors
 				{currentPath === '/dashboard'
 				? 'border-cta-blue dark:border-highlight-blue text-cta-blue dark:text-highlight-blue'
 				: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'}"
@@ -18,7 +19,7 @@
 		</a>
 		<a
 			href="/dashboard/campaigns"
-			class="px-1 py-3 text-sm font-medium border-b-2 transition-colors
+			class="px-6 py-3 text-sm font-medium border-b-2 transition-colors
 				{currentPath === '/dashboard/campaigns'
 				? 'border-cta-blue dark:border-highlight-blue text-cta-blue dark:text-highlight-blue'
 				: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'}"
@@ -27,7 +28,7 @@
 		</a>
 		<a
 			href="/dashboard/events"
-			class="px-1 py-3 text-sm font-medium border-b-2 transition-colors
+			class="px-6 py-3 text-sm font-medium border-b-2 transition-colors
 				{currentPath === '/dashboard/events'
 				? 'border-cta-blue dark:border-highlight-blue text-cta-blue dark:text-highlight-blue'
 				: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'}"