From 6fc5de459a43e544b752859c2b02f4e2f5513785 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Wed, 15 Jul 2026 11:37:25 +0200
Subject: [PATCH] style(header): polish desktop nav dropdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Panel: rounded-xl, soft ring + shadow, backdrop blur, inner padding.
Items as rounded hover pills with vertical gap; active item gets a
wald-50 background. Chevron rotates 180° while the menu is open.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Header.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index fd5e917..5292667 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -154,7 +154,7 @@
                                 aria-expanded="false"
                             >
                                 {link.label}
-                                <Icon icon="lucide:chevron-down" class="size-3 shrink-0" aria-hidden="true" />
+                                <Icon icon="lucide:chevron-down" class="size-3 shrink-0 transition-transform duration-200 group-hover:rotate-180" aria-hidden="true" />
                             </a>
                         {:else}
                             <button
@@ -164,21 +164,21 @@
                                 aria-expanded="false"
                             >
                                 {link.label}
-                                <Icon icon="lucide:chevron-down" class="size-3 shrink-0" aria-hidden="true" />
+                                <Icon icon="lucide:chevron-down" class="size-3 shrink-0 transition-transform duration-200 group-hover:rotate-180" aria-hidden="true" />
                             </button>
                         {/if}
                         <div
                             role="menu"
                             class="absolute left-0 top-full pt-1 min-w-[10rem] opacity-0 invisible translate-y-1 transition-all group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:visible group-focus-within:translate-y-0 z-50"
                         >
-                            <ul class="bg-stein-0 shadow-lg rounded border border-stein-200 py-1 text-stein-800">
+                            <ul class="min-w-[12rem] rounded-xl bg-stein-0/95 backdrop-blur-md shadow-xl ring-1 ring-stein-900/10 p-1.5 flex flex-col gap-1 text-stein-800">
                                 {#each link.children as child}
                                     {@const cActive = isActiveLink(child.href, $page.url.pathname)}
                                     <li role="none">
                                         <a
                                             role="menuitem"
                                             href={child.href}
-                                            class="block px-3 py-1.5 text-xs hover:bg-wald-50 {cActive ? 'font-bold text-wald-700' : ''}"
+                                            class="block rounded-lg px-3 py-2 text-xs leading-snug transition-colors duration-100 hover:bg-wald-50 hover:text-wald-700 {cActive ? 'bg-wald-50 font-semibold text-wald-700' : ''}"
                                             aria-current={cActive ? "page" : undefined}
                                         >
                                             {child.label}