51 lines
1.5 KiB
Svelte
51 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import "./layout.css";
|
|
import favicon from "$lib/assets/favicon.svg";
|
|
import GlobalPlayer from "$lib/components/GlobalPlayer.svelte";
|
|
import ClientOnly from "$lib/components/util/ClientOnly.svelte";
|
|
|
|
let { children } = $props();
|
|
</script>
|
|
|
|
<svelte:head
|
|
><link rel="icon" href={favicon} /><title>AMQ Train</title></svelte:head
|
|
>
|
|
|
|
<!--
|
|
App shell:
|
|
- Mobile/tablet: single column, player renders client-only (mobile bar/drawer)
|
|
- Desktop: 2-column grid, right column reserved for the in-flow player sidebar
|
|
-->
|
|
<div
|
|
class="min-h-dvh lg:grid lg:grid-rows-[auto_1fr] gap-16 lg:grid-cols-[1fr_420px]"
|
|
>
|
|
<header
|
|
class="sticky top-0 z-40 border-b bg-background/80 backdrop-blur lg:col-span-2"
|
|
>
|
|
<div class="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
|
|
<a href="/" class="font-semibold tracking-tight">AMQ Train</a>
|
|
|
|
<nav class="flex items-center gap-2 text-sm">
|
|
<a href="/" class="rounded-md px-3 py-2 hover:bg-muted">Anime</a>
|
|
<a href="/list" class="rounded-md px-3 py-2 hover:bg-muted">Lists</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="min-w-[60dvh]">
|
|
{@render children()}
|
|
</main>
|
|
|
|
<!-- Desktop sidebar column (in normal flow) -->
|
|
<aside class="hidden lg:block">
|
|
<ClientOnly showFallback={false}>
|
|
{#snippet children()}
|
|
<GlobalPlayer />
|
|
{/snippet}
|
|
</ClientOnly>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Mobile player UI is rendered via a portal from the single GlobalPlayer instance
|
|
mounted in the desktop sidebar column above. -->
|