valknar/sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show auth icon strip on mobile header, move burger outside pill
All checks were successful
Build and Push Frontend Image / build (push) Successful in 1m16s
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sebastian Krüger
2026-03-09 09:50:25 +01:00
parent 5219fae36a
commit ab3d9f4118
1 changed files with 43 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/frontend/src/lib/components/header/header.svelte
View File

@@ -60,7 +60,7 @@
</a>
<!-- Desktop Navigation -->
<nav class="hidden w-full lg:flex items-center justify-center gap-8">
<nav class="hidden w-full lg:flex items-center justify-center gap-6">
{#each navLinks as link (link.href)}
<a
href={link.href}
@@ -76,14 +76,14 @@
{/each}
</nav>
<!-- Desktop Auth Actions -->
<!-- Auth Actions -->
{#if authStatus.authenticated}
<div class="w-full hidden lg:flex items-center justify-end">
<div class="w-full flex items-center justify-end">
<div class="flex items-center gap-2 rounded-full bg-muted/30 p-1">
<Button
variant="link"
size="icon"
class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/me" }) ? "text-foreground" : "hover:text-foreground"}`}
href="/me"
title={$_("header.dashboard")}
>
@@ -97,7 +97,7 @@
<Button
variant="link"
size="icon"
class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/play" }) ? "text-foreground" : "hover:text-foreground"}`}
href="/play"
title={$_("header.play")}
>
@@ -112,7 +112,7 @@
<Button
variant="link"
size="icon"
class={`h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/admin" }) ? "text-foreground" : "hover:text-foreground"}`}
class={`flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group ${isActiveLink({ href: "/admin" }) ? "text-foreground" : "hover:text-foreground"}`}
href="/admin/users"
title="Admin"
>
@@ -124,7 +124,7 @@
</Button>
{/if}
<Separator orientation="vertical" class="mx-1 h-6 bg-border/50" />
<Separator orientation="vertical" class="hidden lg:block mx-1 h-6 bg-border/50" />
<a href="/me" class="flex items-center gap-2 px-1 hover:opacity-80 transition-opacity">
<Avatar class="h-7 w-7 ring-2 ring-primary/20">
@@ -138,7 +138,7 @@
{getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
</AvatarFallback>
</Avatar>
<span class="text-sm font-medium text-foreground/90 max-w-24 truncate">
<span class="hidden lg:inline text-sm font-medium text-foreground/90 max-w-24 truncate">
{authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
</span>
</a>
@@ -146,16 +146,24 @@
<Button
variant="link"
size="icon"
class="h-9 w-9 rounded-full p-0 relative text-foreground/80 group hover:text-destructive"
class="hidden lg:flex h-9 w-9 rounded-full p-0 relative text-foreground/80 group hover:text-destructive"
onclick={handleLogout}
title={$_("header.logout")}
>
<span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
</Button>
</div>
<div class="lg:hidden ml-2">
<BurgerMenuButton
label={$_("header.navigation")}
bind:isMobileMenuOpen
onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
/>
</div>
</div>
{:else}
<div class="hidden lg:flex w-full items-center justify-end gap-4">
<div class="w-full flex items-center justify-end gap-2">
<div class="hidden lg:flex gap-4">
<Button variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button>
<Button
href="/signup"
@@ -163,10 +171,18 @@
>{$_("header.signup")}</Button
>
</div>
{/if}
<!-- Burger button — mobile/tablet only -->
<div class="lg:hidden ml-auto">
<div class="flex lg:hidden items-center gap-1 rounded-full bg-muted/30 p-1">
<Button
variant="link"
size="icon"
class="h-9 w-9 rounded-full p-0 text-foreground/80 hover:text-foreground"
href="/login"
title={$_("header.login")}
>
<span class="icon-[ri--login-circle-line] h-4 w-4"></span>
</Button>
</div>
<div class="lg:hidden ml-2">
<BurgerMenuButton
label={$_("header.navigation")}
bind:isMobileMenuOpen
@@ -174,6 +190,8 @@
/>
</div>
</div>
{/if}
</div>
</div>
</header>