marcel/familienarchiv
1
0
Fork 0
Code Issues 106 Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

fix(header): consistent icon styling, focus rings, and responsive breakpoints
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
Details
CI / Backend Unit Tests (push) Has been cancelled
Details
CI / E2E Tests (push) Has been cancelled
Details
CI / Unit & Component Tests (pull_request) Has been cancelled
Details
CI / Backend Unit Tests (pull_request) Has been cancelled
Details
CI / E2E Tests (pull_request) Has been cancelled
Details

Browse Source 
- 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>
This commit is contained in:
Marcel
2026-03-30 22:54:04 +02:00
parent c905f136d2
commit 281934529e
6 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/routes/AppNav.svelte
View File

@@ -38,10 +38,10 @@ function handleOverlayKeydown(event: KeyboardEvent) {
</div>
<!-- Desktop nav -->
<nav class="hidden items-stretch sm:flex sm:space-x-1">
<nav class="hidden items-stretch lg:flex lg:space-x-1">
<a
href="/"
class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}"
@@ -51,7 +51,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<a
href="/persons"
class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
{page.url.pathname.startsWith('/persons')
? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}"
@@ -61,7 +61,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<a
href="/korrespondenz"
class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
{page.url.pathname.startsWith('/korrespondenz')
? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}"
@@ -71,7 +71,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
{#if isAdmin}
<a
href="/admin"
class="inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent
class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-accent
{page.url.pathname.startsWith('/admin')
? 'border-b-2 border-accent text-white'
: 'text-white/55 hover:text-white/85'}"
@@ -83,7 +83,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<!-- Hamburger toggle (mobile only) -->
<button
class="ml-auto flex h-11 w-11 items-center justify-center rounded text-white/70 transition-colors hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent sm:hidden"
class="ml-auto flex h-11 w-11 items-center justify-center self-center rounded text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent lg:hidden"
aria-label={mobileNavOpen ? 'Menü schließen' : 'Menü öffnen'}
aria-expanded={mobileNavOpen}
aria-controls="mobile-nav"
@@ -131,7 +131,7 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<!-- Mobile nav overlay -->
{#if mobileNavOpen}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="fixed inset-0 top-[68px] z-40 sm:hidden" onkeydown={handleOverlayKeydown}>
<div class="fixed inset-0 top-[68px] z-40 lg:hidden" onkeydown={handleOverlayKeydown}>
<!-- Backdrop -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->