45 lines
1.4 KiB
Svelte
45 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import { cn } from '$lib/utils';
|
|
import { page } from '$app/state';
|
|
|
|
const { data, children } = $props();
|
|
const { user } = data;
|
|
|
|
function getNavClass(path: RegExp) {
|
|
return cn(
|
|
'hover:text-foreground/80 transition-colors',
|
|
path.test(page.url.pathname) ? 'text-foreground' : 'text-foreground/60',
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<header class="flex w-full flex-wrap justify-between gap-x-6 gap-y-4 xl:max-w-screen-xl">
|
|
<a href="/" class="contents">
|
|
<span class="font-bold sm:inline-block">VPGen</span>
|
|
</a>
|
|
<nav class="max-w-full">
|
|
<ul class="flex items-center gap-6 overflow-x-auto text-sm">
|
|
<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
|
|
{#if user}
|
|
<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
|
|
<li><a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a></li>
|
|
<li><a href="/devices" class={getNavClass(/^\/devices(\/\d+)?$/)}>Devices</a></li>
|
|
{/if}
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main class="flex min-w-full max-w-full flex-grow flex-col gap-4 xl:min-w-[78rem]">
|
|
{@render children()}
|
|
</main>
|
|
|
|
<!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
|
|
<!--Some shenanings needed to be done to get the footer position to stick correctly,
|
|
didn't work with display: contents-->
|
|
<footer class="inset-x-0 bottom-0 w-full text-center">
|
|
<p>© 2025</p>
|
|
</footer>
|
|
|
|
<style>
|
|
</style>
|