36 lines
1008 B
Svelte
36 lines
1008 B
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 gap-16 lg:grid-cols-[1fr_420px]">
|
|
<main>
|
|
{@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 is rendered by the same GlobalPlayer instance above.
|
|
On small screens, it uses fixed positioning internally so it can overlay. -->
|