stan/esports
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add mobile layout

Browse Source
This commit is contained in:
Stan Runge
2026-03-01 00:43:07 +00:00
parent 3041fa0986
commit 670aa7810c
3 changed files with 96 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/routes/(app)/+layout.svelte
View File

@@ -9,6 +9,8 @@
const user = $derived(page.data?.user);
const activeMatch = $derived(page.data?.activeMatch);
let sidebarOpen = $state(false);
const stateLabel: Record<string, string> = {
CREATED: 'Starting',
LOBBY: 'In Lobby',
@@ -21,19 +23,50 @@
{#if user}
<!-- Authenticated layout with sidebar -->
<div class="flex min-h-dvh">
<Sidebar />
<div class="ml-56 flex flex-1 flex-col">
<Header />
<Sidebar bind:open={sidebarOpen} />
<div class="flex flex-1 flex-col lg:ml-56">
<!-- Header with hamburger on mobile -->
<header
class="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-surface-900/80 px-4 backdrop-blur-md lg:px-6"
>
<button
class="rounded-md p-2 text-text-secondary hover:bg-surface-700 hover:text-text-primary lg:hidden"
onclick={() => (sidebarOpen = !sidebarOpen)}
aria-label="Toggle menu"
>
<svg
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
<div class="lg:flex-1"></div>
<Header />
</header>
{#if activeMatch && !page.url.pathname.startsWith('/matches/' + activeMatch.id)}
<div class="flex items-center justify-between border-b border-yellow-500/30 bg-yellow-500/10 px-6 py-2.5">
<div
class="flex items-center justify-between border-b border-yellow-500/30 bg-yellow-500/10 px-4 py-2.5 lg:px-6"
>
<div class="flex items-center gap-2.5 text-sm">
<div class="relative h-2 w-2">
<div class="absolute inset-0 animate-ping rounded-full bg-yellow-400 opacity-75"></div>
<div
class="absolute inset-0 animate-ping rounded-full bg-yellow-400 opacity-75"
></div>
<div class="h-2 w-2 rounded-full bg-yellow-400"></div>
</div>
<span class="font-600 text-yellow-300">Active match in progress</span>
<span class="text-xs text-yellow-400/70">
{activeMatch.name ?? 'Match'} &middot; {stateLabel[activeMatch.state] ?? activeMatch.state}
<span class="font-600 text-yellow-300">Active match</span>
<span class="hidden text-xs text-yellow-400/70 sm:inline">
{activeMatch.name ?? 'Match'} &middot; {stateLabel[activeMatch.state] ??
activeMatch.state}
</span>
</div>
<a
@@ -44,7 +77,7 @@
</a>
</div>
{/if}
<main class="flex-1 p-6">
<main class="flex-1 p-4 lg:p-6">
{@render children()}
</main>
</div>