50 lines
1.1 KiB
Svelte
50 lines
1.1 KiB
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>
|