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)}
>
(!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"
>