From 9234d29ea3c55c5979d0cf5b46b402db9487e193 Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Mon, 2 Nov 2026 00:23:45 +0100
Subject: [PATCH] fix menu bar still sometimes hiding on navigation

---
 src/app/layout/Menu.svelte | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/layout/Menu.svelte b/src/app/layout/Menu.svelte
index 1e0172e..3bbfd0b 100644
--- a/src/app/layout/Menu.svelte
+++ b/src/app/layout/Menu.svelte
@@ -58,7 +58,6 @@
   let isTouch = $state(false);
   let isOpen = $state(false);
   let windowHeight = $state(0);
-  let pageLoadTimestamp = $state(0);
 
   // lifecycle
   $effect(() => {
@@ -67,8 +66,6 @@
 
   onMount(() => {
     document.addEventListener('astro:page-load', () => {
-      pageLoadTimestamp = Date.now();
-
       const touchStartListener = () => {
         isTouch = true;
       };
@@ -127,11 +124,16 @@
     class:hidden={!(isOpen || showMenuPermanent)}
     class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
     onmouseenter={() => !isTouch && (isOpen = true)}
-    onmouseleave={() => {
+    onmouseleave={(event) => {
       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;
+      // event
+      const { left, right, top, bottom } = event.currentTarget.getBoundingClientRect();
+      const isOverMenu =
+        event.clientX >= left && event.clientX <= right && event.clientY >= top && event.clientY <= bottom;
+
+      isOpen = isOverMenu;
     }}
     role="tooltip"
   >