fix menu sometimes collapsing when navigation on pc

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)}
   >
     <img class="absolute w-full h-full p-1 pixelated" src={MenuButton.src} alt="menu" />
     <img
@@ -126,8 +129,13 @@
   <div
     class:hidden={!(isOpen || showMenuPermanent)}
     class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
-    onmouseenter={() => (!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"
   >
     <ul class="bg-base-200 rounded">