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> </a>
<!-- Desktop Navigation --> <!-- 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)} {#each navLinks as link (link.href)}
<a <a
href={link.href} href={link.href}
@@ -76,14 +76,14 @@
{/each} {/each}
</nav> </nav>
<!-- Desktop Auth Actions --> <!-- Auth Actions -->
{#if authStatus.authenticated} {#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"> <div class="flex items-center gap-2 rounded-full bg-muted/30 p-1">
<Button <Button
variant="link" variant="link"
size="icon" 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" href="/me"
title={$_("header.dashboard")} title={$_("header.dashboard")}
> >
@@ -97,7 +97,7 @@
<Button <Button
variant="link" variant="link"
size="icon" 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" href="/play"
title={$_("header.play")} title={$_("header.play")}
> >
@@ -112,7 +112,7 @@
<Button <Button
variant="link" variant="link"
size="icon" 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" href="/admin/users"
title="Admin" title="Admin"
> >
@@ -124,7 +124,7 @@
</Button> </Button>
{/if} {/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"> <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"> <Avatar class="h-7 w-7 ring-2 ring-primary/20">
@@ -138,7 +138,7 @@
{getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)} {getUserInitials(authStatus.user!.artist_name || authStatus.user!.email)}
</AvatarFallback> </AvatarFallback>
</Avatar> </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]} {authStatus.user!.artist_name || authStatus.user!.email.split("@")[0]}
</span> </span>
</a> </a>
@@ -146,16 +146,24 @@
<Button <Button
variant="link" variant="link"
size="icon" 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} onclick={handleLogout}
title={$_("header.logout")} title={$_("header.logout")}
> >
<span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span> <span class="icon-[ri--logout-circle-r-line] h-4 w-4"></span>
</Button> </Button>
</div> </div>
<div class="lg:hidden ml-2">
<BurgerMenuButton
label={$_("header.navigation")}
bind:isMobileMenuOpen
onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
/>
</div>
</div> </div>
{:else} {: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 variant="outline" class="font-medium" href="/login">{$_("header.login")}</Button>
<Button <Button
href="/signup" href="/signup"
@@ -163,10 +171,18 @@
>{$_("header.signup")}</Button >{$_("header.signup")}</Button
> >
</div> </div>
{/if} <div class="flex lg:hidden items-center gap-1 rounded-full bg-muted/30 p-1">
<Button
<!-- Burger button — mobile/tablet only --> variant="link"
<div class="lg:hidden ml-auto"> 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 <BurgerMenuButton
label={$_("header.navigation")} label={$_("header.navigation")}
bind:isMobileMenuOpen bind:isMobileMenuOpen
@@ -174,6 +190,8 @@
/> />
</div> </div>
</div> </div>
{/if}
</div>
</div> </div>
</header> </header>