diff --git a/src/app/layout/Menu.svelte b/src/app/layout/Menu.svelte index 2de14e4..9138832 100644 --- a/src/app/layout/Menu.svelte +++ b/src/app/layout/Menu.svelte @@ -58,6 +58,7 @@ let isTouch = $state(false); let isOpen = $state(false); let windowHeight = $state(0); + let pageLoadTimestamp = $state(0); // lifecycle $effect(() => { @@ -71,6 +72,8 @@ new MutationObserver(() => setTimeout(updateActiveNavPath)).observe(document.head, { childList: true }); document.addEventListener('astro:page-load', () => { + pageLoadTimestamp = Date.now(); + const touchStartListener = () => { isTouch = true; }; @@ -113,7 +116,7 @@ showMenuPermanent = !showMenuPermanent; } }} - ontouchend={() => (showMenuPermanent = !showMenuPermanent) } + ontouchend={() => (showMenuPermanent = !showMenuPermanent)} > menu (!isTouch && (isOpen = true))} - onmouseleave={() => (!isTouch && (isOpen = false))} + onmouseenter={() => !isTouch && (isOpen = true)} + onmouseleave={() => { + if (isTouch) return; + // when navigated, the page reload may take a few ms and the menu isn't rendered, which js interprets as an mouse leave + // event. with the 50ms threshold this is mostly fixed, except for maybe slow connections + else if (Date.now() - pageLoadTimestamp > 50) isOpen = false; + }} role="tooltip" >