admin/windwiderstand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(header): polish desktop nav dropdown
Deploy / verify (push) Successful in 2m12s
Details
Deploy / deploy (push) Successful in 2m9s
Details

Browse Source 
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>
This commit is contained in:
Peter Meier
2026-07-15 11:37:25 +02:00
parent 4b87ad3c84
commit 6fc5de459a
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Header.svelte
+4 -4
View File
@@ -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}