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

74
src/lib/components/Header.svelte
View File

@@ -12,43 +12,37 @@
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">
{#if user}
<div class="flex items-center gap-3">
{#if user.isRootAdmin}
<span class="rounded px-1.5 py-0.5 text-[10px] font-700 bg-red-500/20 text-red-400">
ROOT
</span>
{:else if badge}
<span class="rounded px-1.5 py-0.5 text-[10px] font-700 {badge.color}">
{badge.label}
</span>
{/if}
{#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>
<form method="post" action="/settings?/logout" use:enhance>
<button
type="submit"
class="rounded-md border border-border px-2.5 py-1 text-xs text-text-secondary transition-colors hover:border-red-500/30 hover:text-red-400"
>
Logout
</button>
</form>
</div>
{:else}
<a
href="/login"
class="font-600 rounded-md bg-accent px-3.5 py-1.5 text-sm text-surface-900 transition-colors hover:bg-accent-hover"
>
Sign in with osu!
</a>
{/if}
</div>
</header>
<div class="flex items-center gap-4">
{#if user}
<div class="flex items-center gap-3">
{#if user.isRootAdmin}
<span class="rounded px-1.5 py-0.5 text-[10px] font-700 bg-red-500/20 text-red-400">
ROOT
</span>
{:else if badge}
<span class="rounded px-1.5 py-0.5 text-[10px] font-700 {badge.color}">
{badge.label}
</span>
{/if}
{#if user.image}
<img src={user.image} alt={user.name} class="h-7 w-7 rounded-full" />
{/if}
<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"
class="rounded-md border border-border px-2.5 py-1 text-xs text-text-secondary transition-colors hover:border-red-500/30 hover:text-red-400"
>
Logout
</button>
</form>
</div>
{:else}
<a
href="/login"
class="font-600 rounded-md bg-accent px-3.5 py-1.5 text-sm text-surface-900 transition-colors hover:bg-accent-hover"
>
Sign in with osu!
</a>
{/if}
</div>

21
src/lib/components/Sidebar.svelte
View File

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

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>