add mobile layout

src/lib/components/Header.svelte

@@ -12,12 +12,7 @@
 	const badge = $derived(user?.role ? roleBadge[user.role] : null);
 </script>
 
-<header
-	class="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-surface-900/80 px-6 backdrop-blur-md"
->
-	<div></div>
-
-	<div class="flex items-center gap-4">
+<div class="flex items-center gap-4">
 	{#if user}
 		<div class="flex items-center gap-3">
 			{#if user.isRootAdmin}
@@ -32,7 +27,7 @@
 			{#if user.image}
 				<img src={user.image} alt={user.name} class="h-7 w-7 rounded-full" />
 			{/if}
-				<span class="font-500 text-sm text-text-primary">{user.name}</span>
+			<span class="hidden font-500 text-sm text-text-primary sm:inline">{user.name}</span>
 			<form method="post" action="/settings?/logout" use:enhance>
 				<button
 					type="submit"
@@ -50,5 +45,4 @@
 			Sign in with osu!
 		</a>
 	{/if}
-	</div>
-</header>
+</div>

src/lib/components/Sidebar.svelte

@@ -3,6 +3,8 @@
 
 	const user = $derived(page.data?.user);
 
+	let { open = $bindable(false) } = $props();
+
 	const nav = [
 		{ href: '/', label: 'Dashboard', icon: '⌂' },
 		{ href: '/matches', label: 'Matches', icon: '⚔' },
@@ -18,10 +20,27 @@
 
 	const isStaff = $derived(user?.role === 'referee' || user?.role === 'admin');
 	const isAdmin = $derived(user?.role === 'admin');
+
+	// Close sidebar on navigation (mobile)
+	$effect(() => {
+		page.url.pathname;
+		open = false;
+	});
 </script>
 
+<!-- Backdrop (mobile only) -->
+{#if open}
+	<button
+		class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden"
+		onclick={() => (open = false)}
+		aria-label="Close menu"
+	></button>
+{/if}
+
 <aside
-	class="fixed top-0 left-0 z-40 flex h-full w-56 flex-col border-r border-border bg-surface-800"
+	class="fixed top-0 left-0 z-50 flex h-full w-56 flex-col border-r border-border bg-surface-800 transition-transform duration-200 {open
+		? 'translate-x-0'
+		: '-translate-x-full'} lg:translate-x-0 lg:z-40"
 >
 	<!-- Logo -->
 	<a href="/" class="flex items-center gap-2.5 px-5 py-5">

src/routes/(app)/+layout.svelte

@@ -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">
+		<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>