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:
+2
-1
@@ -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;
|
||||
|
||||
@@ -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 = () => {
|
||||
|
||||
Reference in New Issue
Block a user