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>