feat: add header

src/components/Header.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	const links = [
+		{ name: "home", url: "/" },
+		{ name: "status", url: "/status" },
+		{ name: "uses", url: "/uses" },
+	];
+
+	let pathname = $state("/");
+	let activeIndex = $derived(links.findIndex((link) => link.url === pathname));
+
+	// Astro.url.pathname did not work here presumably due to swup
+	const getPathname = () => {
+		pathname = window.location.pathname;
+	};
+
+	getPathname();
+	document.addEventListener("astro:page-load", getPathname);
+</script>
+
+<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>
+
+		{#each links as item, i}
+			<!-- 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>
+		{/each}
+	</div>
+</section>

src/components/Socials.astro

@@ -22,7 +22,7 @@ import MailIcon from "../assets/icons/socials/mail.svg";
 			<a href="https://www.reddit.com/user/trafficlunr" data-tooltip="Reddit"><RedditIcon /></a>
 		</li>
 		<li class="z-50">
-			<a href="https://discord.com/users/1076507715775496233" data-tooltip="Discord"><DiscordIcon /></a>
+			<a href="https://discord.com/users/1076507715775496233" data-tooltip="Discord: @trafficlunar"><DiscordIcon /></a>
 		</li>
 		<li>
 			<a href="https://www.youtube.com/@trafficlunar" data-tooltip="YouTube"><YouTubeIcon /></a>