From a6bd4c53ff33629a18c22f6e8a436bf51ec372af Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.net>
Date: Tue, 19 May 2026 01:04:43 +0000
Subject: 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.
---
 src/lib/Layout/Dropdown.svelte | 16 +++++++++-------
 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={[
-- 
cgit v1.2.3