fix menu bar being permantently open when navigating on mobile

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">