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>
This commit is contained in:
Alejandro Veras
2026-10-09 10:01:41 -04:00
parent 5161c22e68
commit 39b2c0a857
2 changed files with 8 additions and 1 deletions
+2 -1
View File
@@ -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;
+6
View File
@@ -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 = () => {