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 /src | |
| 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.
Diffstat (limited to 'src')
| -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={[ |