feat: add header

astro.config.mjs

@@ -8,7 +8,7 @@ import nekoweb from "@indiefellas/astro-adapter-nekoweb";
 import svelte from "@astrojs/svelte";
 import sitemap from "@astrojs/sitemap";
 
-import swup, { Theme } from "@swup/astro";
+import swup from "@swup/astro";
 
 const { NEKOWEB_API_KEY, NEKOWEB_COOKIE } = loadEnv(env.NODE_ENV ?? "", process.cwd(), "");
 

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>

src/layouts/Layout.astro

@@ -7,6 +7,7 @@ import "../style.css";
 import Socials from "../components/Socials.astro";
 import Clock from "../components/Clock.svelte";
 import Online from "../components/Online.svelte";
+import Header from "../components/Header.svelte";
 import Footer from "../components/Footer.astro";
 
 import KawaiiLogo from "../assets/kawaii.svg";
@@ -58,6 +59,7 @@ import Lunar from "../assets/lunar.svg";
 				<TrafficConeAlt class="absolute size-12 bottom-full left-16 text-peach" />
 				<TrafficConeAlt class="absolute size-14 bottom-full left-27 text-peach" />
 
+				<Header client:only />
 				<!-- need <main /> for transitions -->
 				<main>
 					<slot />

src/pages/uses.astro

@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout>
+	<section>
+		<legend>uses</legend>
+
+		<p>Coming soon...</p>
+	</section>
+</Layout>