main-site/src/routes/Header.svelte

<script lang="ts">
	import { page } from '$app/stores';
	import { Button } from '$lib/components/ui/button';

	const button = 'border-t-2 bg-black/55 hover:bg-black/70 hover:border-primary w-28';
</script>

<ul
	class="sticky flex h-16 w-full flex-row items-center justify-center gap-3 border-b bg-black/40 backdrop-blur-sm"
>
	<li>
		<Button
			variant="ghost"
			href="/"
			class="{button} + {$page.url.pathname === '/'
				? 'border-primary text-primary'
				: 'text-accent'}"
		>
			Home
		</Button>
	</li>
	<li>
		<Button
			variant="ghost"
			href="/servers"
			class="{button} + {$page.url.pathname.startsWith('/servers')
				? 'border-primary text-primary'
				: 'text-accent'}"
		>
			Servers
		</Button>
	</li>
	<li>
		<Button
			variant="ghost"
			href="/services"
			class="{button} + {$page.url.pathname.startsWith('/services')
				? 'border-primary text-primary'
				: 'text-accent'}"
		>
			Services
		</Button>
	</li>
	<li>
		<Button
			variant="ghost"
			href="/about"
			class="{button} + {$page.url.pathname.startsWith('/about')
				? 'border-primary text-primary'
				: 'text-accent'}"
		>
			About
		</Button>
	</li>
</ul>