Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
aca649039c |
@@ -20,6 +20,7 @@
|
||||
// Desktop dropdown menus
|
||||
let userMenuOpen = $state(false);
|
||||
let langMenuOpen = $state(false);
|
||||
let themeMenuOpen = $state(false);
|
||||
|
||||
const THEMES = [
|
||||
{ id: 'amber', color: '#f59e0b' },
|
||||
@@ -316,38 +317,52 @@
|
||||
{m.nav_feedback()}
|
||||
</a>
|
||||
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<!-- Theme dots (desktop) -->
|
||||
<div class="hidden sm:flex items-center gap-1 mr-1">
|
||||
{#each THEMES as t, i}
|
||||
{#if i === 3}
|
||||
<span class="w-px h-3 bg-(--color-border) mx-0.5"></span>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { currentTheme = t.id; }}
|
||||
title={t.id}
|
||||
class="w-3.5 h-3.5 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : t.light ? 'border-(--color-border) opacity-70 hover:opacity-100' : 'border-transparent opacity-50 hover:opacity-100'}"
|
||||
style="background: {t.color};"
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<!-- Theme dropdown (desktop) -->
|
||||
<div class="hidden sm:block relative">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { themeMenuOpen = !themeMenuOpen; langMenuOpen = false; userMenuOpen = false; }}
|
||||
title="Theme"
|
||||
class="flex items-center justify-center w-7 h-7 rounded transition-colors {themeMenuOpen ? 'bg-(--color-surface-2)' : 'hover:bg-(--color-surface-2)'}"
|
||||
>
|
||||
<span
|
||||
class="w-3.5 h-3.5 rounded-full border-2 border-(--color-text) shrink-0"
|
||||
style="background: {THEMES.find(t => t.id === currentTheme)?.color ?? '#f59e0b'};"
|
||||
></span>
|
||||
</button>
|
||||
{#if themeMenuOpen}
|
||||
<div class="absolute right-0 top-full mt-1 bg-(--color-surface-2) border border-(--color-border) rounded-lg shadow-xl py-2 px-2.5 z-50">
|
||||
<div class="flex items-center gap-1.5">
|
||||
{#each THEMES as t, i}
|
||||
{#if i === 3}
|
||||
<span class="w-px h-3 bg-(--color-border) mx-0.5"></span>
|
||||
{/if}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { currentTheme = t.id; themeMenuOpen = false; }}
|
||||
title={t.id}
|
||||
class="w-4 h-4 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : t.light ? 'border-(--color-border) opacity-70 hover:opacity-100' : 'border-transparent opacity-50 hover:opacity-100'}"
|
||||
style="background: {t.color};"
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Language dropdown (desktop) -->
|
||||
<div class="hidden sm:block relative">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { langMenuOpen = !langMenuOpen; userMenuOpen = false; }}
|
||||
class="flex items-center gap-1 px-2 py-1 rounded text-xs font-mono transition-colors {langMenuOpen ? 'bg-(--color-surface-2) text-(--color-text)' : 'text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)'}"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
|
||||
</svg>
|
||||
{getLocale().toUpperCase()}
|
||||
<svg class="w-3 h-3 shrink-0 transition-transform {langMenuOpen ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Language dropdown (desktop) -->
|
||||
<div class="hidden sm:block relative">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { langMenuOpen = !langMenuOpen; userMenuOpen = false; themeMenuOpen = false; }}
|
||||
class="flex items-center gap-1 px-2 py-1 rounded text-xs font-mono transition-colors {langMenuOpen ? 'bg-(--color-surface-2) text-(--color-text)' : 'text-(--color-muted) hover:bg-(--color-surface-2) hover:text-(--color-text)'}"
|
||||
>
|
||||
<svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
|
||||
</svg>
|
||||
{getLocale().toUpperCase()}
|
||||
</button>
|
||||
{#if langMenuOpen}
|
||||
<div class="absolute right-0 top-full mt-1 bg-(--color-surface-2) border border-(--color-border) rounded-lg shadow-xl py-1 z-50 min-w-[80px]">
|
||||
{#each locales as locale}
|
||||
@@ -372,20 +387,17 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- User menu dropdown (desktop) -->
|
||||
<div class="hidden sm:block relative">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { userMenuOpen = !userMenuOpen; langMenuOpen = false; }}
|
||||
class="flex items-center gap-1.5 pl-1.5 pr-2 py-1 rounded transition-colors {userMenuOpen ? 'bg-(--color-surface-2)' : 'hover:bg-(--color-surface-2)'}"
|
||||
>
|
||||
<span class="w-6 h-6 rounded-full bg-(--color-brand)/20 text-(--color-brand) text-xs font-bold flex items-center justify-center shrink-0">
|
||||
{data.user.username[0].toUpperCase()}
|
||||
</span>
|
||||
<svg class="w-3 h-3 text-(--color-muted) transition-transform {userMenuOpen ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- User menu dropdown (desktop) -->
|
||||
<div class="hidden sm:block relative">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { userMenuOpen = !userMenuOpen; langMenuOpen = false; themeMenuOpen = false; }}
|
||||
class="flex items-center gap-1.5 pl-1.5 pr-1.5 py-1 rounded transition-colors {userMenuOpen ? 'bg-(--color-surface-2)' : 'hover:bg-(--color-surface-2)'}"
|
||||
>
|
||||
<span class="w-6 h-6 rounded-full bg-(--color-brand)/20 text-(--color-brand) text-xs font-bold flex items-center justify-center shrink-0">
|
||||
{data.user.username[0].toUpperCase()}
|
||||
</span>
|
||||
</button>
|
||||
{#if userMenuOpen}
|
||||
<div class="absolute right-0 top-full mt-1 bg-(--color-surface-2) border border-(--color-border) rounded-lg shadow-xl py-1 z-50 min-w-[170px]">
|
||||
<a
|
||||
|
||||
Reference in New Issue
Block a user