diff options
| author | Fuwn <[email protected]> | 2026-05-19 01:04:43 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-05-19 01:04:43 +0000 |
| commit | a6bd4c53ff33629a18c22f6e8a436bf51ec372af (patch) | |
| tree | 204ea022d726370a332c7bbc15f107b4db136dcc | |
| parent | fix(hero): swap 100vh for 100dvh on landing hero (diff) | |
| download | due.moe-a6bd4c53ff33629a18c22f6e8a436bf51ec372af.tar.xz due.moe-a6bd4c53ff33629a18c22f6e8a436bf51ec372af.zip | |
fix(nav): close dropdowns and hamburger on touch / outside click
Two related touch fixes:
- Dropdown :hover rule was sticky on touch devices after a tap, keeping
the menu visible even when the click toggle set open to false. Gate
the hover rule behind @media (hover: hover) so only true pointer
devices use the hover path; touch uses the click-driven open class.
- Hamburger menu had no outside-click close. Added a window click
handler that closes isMenuOpen when the target is outside .header.
Clicks on the toggle and on nav items stay inside .header, so opening
and item navigation are unaffected.
| -rw-r--r-- | src/lib/Layout/Dropdown.svelte | 16 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 7 |
2 files changed, 15 insertions, 8 deletions
diff --git a/src/lib/Layout/Dropdown.svelte b/src/lib/Layout/Dropdown.svelte index 95b763ad..dcdd7f7c 100644 --- a/src/lib/Layout/Dropdown.svelte +++ b/src/lib/Layout/Dropdown.svelte @@ -184,13 +184,15 @@ const handleItemKey = async (e: KeyboardEvent, index: number) => { transform: var(--dropdown-transform); } - .dropdown:hover .dropdown-content { - opacity: 1; - transform: translateY(0); - visibility: visible; - transition-delay: 0s, 0s, 0s; - left: var(--dropdown-left); - transform: var(--dropdown-transform); + @media (hover: hover) { + .dropdown:hover .dropdown-content { + opacity: 1; + transform: translateY(0); + visibility: visible; + transition-delay: 0s, 0s, 0s; + left: var(--dropdown-left); + transform: var(--dropdown-transform); + } } .dropdown-content a { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a7a03066..04c155eb 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -217,7 +217,12 @@ $: { <HeadTitle /> -<svelte:window on:keydown={(e) => { if (e.key === 'Escape' && isMenuOpen) isMenuOpen = false; }} /> +<svelte:window + on:keydown={(e) => { if (e.key === 'Escape' && isMenuOpen) isMenuOpen = false; }} + on:click={(e) => { + if (isMenuOpen && !(e.target as HTMLElement).closest('.header')) isMenuOpen = false; + }} +/> <CommandPalette items={[ |