From 39b2c0a85755e3fde6c8bd3c69687e554c4b0947 Mon Sep 17 00:00:00 2001
From: Alejandro Veras <verasetanislao21@gmail.com>
Date: Fri, 9 Oct 2026 10:01:41 -0400
Subject: [PATCH] Close nav dropdowns once the pointer leaves after a click

The panel opened on :focus-within, so the clicked link's focus kept it
pinned open after navigating. Open on keyboard focus only and release
focus on route change.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/globals.css            | 3 ++-
 src/components/site-header.tsx | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 44f82af..cb83f8f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1847,8 +1847,9 @@ a {
     visibility 0.3s;
 }
 
+/* Keyboard focus opens the panel; a mouse click's focus doesn't, so it closes as soon as the pointer leaves. */
 .nav-group:hover .nav-panel,
-.nav-group:focus-within .nav-panel {
+.nav-group:has(:focus-visible) .nav-panel {
   opacity: 1;
   visibility: visible;
   transform: none;
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index 74dfffa..850189c 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -19,6 +19,12 @@ export default function SiteHeader() {
     setOpen(false);
   }
 
+  // Drop focus left on a nav link after navigating so its dropdown doesn't stay pinned open.
+  useEffect(() => {
+    const el = document.activeElement;
+    if (el instanceof HTMLElement && el.closest(".site-header")) el.blur();
+  }, [pathname]);
+
   useEffect(() => {
     let lastY = window.scrollY;
     const onScroll = () => {