From b5e84059eb44ddb67913088e6f53b0b83a4f11d4 Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Sat, 31 Oct 2026 14:06:31 +0100
Subject: [PATCH] fix menu bar being permantently open when navigating on
 mobile

---
 src/app/layout/Menu.svelte | 33 ++++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/app/layout/Menu.svelte b/src/app/layout/Menu.svelte
index 5070399..2de14e4 100644
--- a/src/app/layout/Menu.svelte
+++ b/src/app/layout/Menu.svelte
@@ -69,6 +69,23 @@
     // the mutation observer callback runs too fast, hence the call to `updateActiveNavPath` must be wrapped in an empty
     // setTimeout to not cause any visual bugs
     new MutationObserver(() => setTimeout(updateActiveNavPath)).observe(document.head, { childList: true });
+
+    document.addEventListener('astro:page-load', () => {
+      const touchStartListener = () => {
+        isTouch = true;
+      };
+      const touchEndListener = (e: TouchEvent) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (!navElem.contains(e.target)) showMenuPermanent = false;
+      };
+
+      document.body.removeEventListener('touchstart', touchStartListener);
+      document.body.removeEventListener('touchend', touchEndListener);
+
+      document.body.addEventListener('touchstart', touchStartListener);
+      document.body.addEventListener('touchend', touchEndListener);
+    });
   });
 
   // functions
@@ -80,13 +97,6 @@
 </script>
 
 <svelte:window bind:innerHeight={windowHeight} />
-<svelte:body
-  ontouchend={(e) => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (isTouch && !navElem.contains(e.target)) showMenuPermanent = false;
-  }}
-/>
 
 <div
   class="fixed bottom-4 right-4 sm:left-4 sm:right-[initial] group/menu-bar flex flex-col-reverse justify-center items-center z-50 main-menu"
@@ -103,10 +113,7 @@
         showMenuPermanent = !showMenuPermanent;
       }
     }}
-    ontouchend={() => {
-      isTouch = true;
-      showMenuPermanent = !showMenuPermanent;
-    }}
+    ontouchend={() => (showMenuPermanent = !showMenuPermanent) }
   >
     <img class="absolute w-full h-full p-1 pixelated" src={MenuButton.src} alt="menu" />
     <img
@@ -119,8 +126,8 @@
   <div
     class:hidden={!(isOpen || showMenuPermanent)}
     class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
-    onmouseenter={() => (isOpen = true)}
-    onmouseleave={() => (isOpen = false)}
+    onmouseenter={() => (!isTouch && (isOpen = true))}
+    onmouseleave={() => (!isTouch && (isOpen = false))}
     role="tooltip"
   >
     <ul class="bg-base-200 rounded">