<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 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-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>
		<Button
			variant="ghost"
			href="/about"
			class="{button} + {!$page.url.pathname.startsWith('/about')
				|| 'border-secondary text-secondary'}"
		>
			About
		</Button>
	</li>
</ul>