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-secondary w-28';
</script>

<ul
	class="absolute z-50 flex h-16 w-full flex-row overflow-x-auto items-center gap-3 border-b bg-black/40 backdrop-blur-sm"
>
	<li class="ml-auto">
		<Button
			variant="ghost"
			href="/"
			class="{button} + {!($page.url.pathname === '/') || 'border-secondary text-secondary'}"
		>
			Home
		</Button>
	</li>
	<li>
		<Button
			variant="ghost"
			href="/servers"
			class="{button} + {!$page.url.pathname.startsWith('/servers') ||
				'border-secondary text-secondary'}"
		>
			Servers
		</Button>
	</li>
	<li>
		<Button
			variant="ghost"
			href="/services"
			class="{button} + {!$page.url.pathname.startsWith('/services') ||
				'border-secondary text-secondary'}"
		>
			Services
		</Button>
	</li>
	<li class="mr-auto">
		<Button
			variant="ghost"
			href="/about"
			class="{button} + {!$page.url.pathname.startsWith('/about') ||
				'border-secondary text-secondary'}"
		>
			About
		</Button>
	</li>
</ul>