From b0c4a54cf44f4a7583d127992022d6fee463ffd2 Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Wed, 17 Sep 2025 22:09:40 +0100
Subject: [PATCH] fix: make header links work a bit better

---
 src/components/Header.svelte | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 2c1ddba..2e51ff1 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -20,22 +20,23 @@
 <section class="!p-1.5 mb-8 w-fit">
 	<div class="relative grid grid-cols-3 gap-1.5">
 		<!-- Animated background for active link -->
-		<div
-			class="absolute inset-0 bg-peach rounded w-[calc((100%/3)-0.25rem)] transition-transform duration-300 ease-out"
-			style="transform: translateX(calc({activeIndex * 100}% + {activeIndex * 0.375}rem));"
-		></div>
+		{#if activeIndex !== -1}
+			<div
+				class="absolute inset-0 bg-peach rounded w-[calc((100%/3)-0.25rem)] transition-transform duration-300 ease-out"
+				style="transform: translateX(calc({activeIndex * 100}% + {activeIndex * 0.375}rem));"
+			></div>
+		{/if}
 
 		{#each links as item}
 			<!-- Div here to hide the hover background behind the animated background -->
-			<div class="flex rounded-sm hover:bg-surface0">
-				<a
-					href={item.url}
-					class="z-10 w-full font-medium text-sm text-center px-4 py-1 rounded-sm transition-colors duration-200 {pathname === item.url &&
-						'!text-base'}"
-				>
-					{item.name}
-				</a>
-			</div>
+			<a
+				href={item.url}
+				class="z-10 w-full font-medium text-sm text-center px-4 py-1 rounded-sm transition-colors duration-200 {pathname === item.url
+					? '!text-base'
+					: 'hover:bg-surface0'}"
+			>
+				{item.name}
+			</a>
 		{/each}
 	</div>
 </section>