281934529e
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Unit & Component Tests (pull_request) Has been cancelled
CI / Backend Unit Tests (pull_request) Has been cancelled
CI / E2E Tests (pull_request) Has been cancelled
- Normalize all header icon buttons to white/65 + white/10 hover bg - Fix guest person icon (img tag needs brightness-0 invert, not text color) - Add missing focus-visible rings to ThemeToggle and LanguageSwitcher - Use focus-visible:rounded on nav links so active underline stays sharp - Bump burger/nav breakpoint from sm→lg to prevent overflow on tablets Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
82 lines
2.4 KiB
Svelte
82 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
let { userInitials }: { userInitials: string | null } = $props();
|
|
|
|
let userMenuOpen = $state(false);
|
|
|
|
function clickOutside(node: HTMLElement) {
|
|
const handleClick = (event: MouseEvent) => {
|
|
if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
|
|
userMenuOpen = false;
|
|
}
|
|
};
|
|
document.addEventListener('click', handleClick, true);
|
|
return () => {
|
|
document.removeEventListener('click', handleClick, true);
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="relative"
|
|
{@attach clickOutside}
|
|
onkeydown={(e) => {
|
|
if (e.key === 'Escape') userMenuOpen = false;
|
|
}}
|
|
role="none"
|
|
>
|
|
{#if userInitials}
|
|
<button
|
|
type="button"
|
|
aria-expanded={userMenuOpen}
|
|
aria-haspopup="true"
|
|
onclick={() => (userMenuOpen = !userMenuOpen)}
|
|
class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-mint font-sans text-xs font-bold text-brand-navy transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
{userInitials}
|
|
</button>
|
|
{:else}
|
|
<button
|
|
type="button"
|
|
aria-label={m.nav_profile()}
|
|
aria-expanded={userMenuOpen}
|
|
aria-haspopup="true"
|
|
onclick={() => (userMenuOpen = !userMenuOpen)}
|
|
class="group rounded-sm p-2 transition-colors hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
|
|
>
|
|
<img
|
|
src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
|
|
alt=""
|
|
aria-hidden="true"
|
|
class="h-5 w-5 opacity-65 brightness-0 invert transition-opacity group-hover:opacity-100"
|
|
/>
|
|
</button>
|
|
{/if}
|
|
|
|
{#if userMenuOpen}
|
|
<div
|
|
class="absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border border-line bg-overlay shadow-md"
|
|
>
|
|
<a
|
|
href="/profile"
|
|
onclick={() => (userMenuOpen = false)}
|
|
class="block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted hover:text-ink"
|
|
>
|
|
{m.nav_profile()}
|
|
</a>
|
|
<div class="border-t border-line">
|
|
<form action="/logout" method="POST" use:enhance>
|
|
<button
|
|
type="submit"
|
|
class="w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:bg-muted hover:text-ink"
|
|
>
|
|
{m.nav_logout()}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|