From 82224a769f95884362ef961d34a3dacab0cfc0bb Mon Sep 17 00:00:00 2001
From: bytedream <me@bytedream.dev>
Date: Mon, 2 Nov 2026 00:54:29 +0100
Subject: [PATCH] do not reload site when choosing active menu entry on menu
 bar

---
 src/app/layout/Menu.svelte | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/app/layout/Menu.svelte b/src/app/layout/Menu.svelte
index 3bbfd0b..c6a06e1 100644
--- a/src/app/layout/Menu.svelte
+++ b/src/app/layout/Menu.svelte
@@ -8,7 +8,6 @@
   import MenuButton from '@assets/img/menu-button.webp';
   import MenuInventoryBar from '@assets/img/menu-inventory-bar.webp';
   import MenuSelectedFrame from '@assets/img/menu-selected-frame.webp';
-  import { navigate } from 'astro:transitions/client';
   import { onMount } from 'svelte';
 
   // html bindings
@@ -65,6 +64,8 @@
   });
 
   onMount(() => {
+    updateActiveNavPath();
+
     document.addEventListener('astro:page-load', () => {
       const touchStartListener = () => {
         isTouch = true;
@@ -87,8 +88,8 @@
 
   // functions
   function updateActiveNavPath() {
-    for (let i = 0; i < navPaths.length; i++) {
-      navPaths[i].active = new URL(document.baseURI).pathname + navPaths[i].href === window.location.pathname;
+    for (const navPath of navPaths) {
+      navPath.active = new URL(document.baseURI).pathname + navPath.href === window.location.pathname;
     }
   }
 </script>
@@ -102,20 +103,14 @@
   <button
     class={isTouch ? 'btn btn-square relative w-16 h-16' : 'btn btn-square group/menu-button relative w-16 h-16'}
     onclick={() => {
-      if (!isTouch) {
-        let activePath = navPaths.find((path) => path.active);
-        if (activePath !== undefined) {
-          navigate(activePath.href);
-        }
-        showMenuPermanent = !showMenuPermanent;
-      }
+      if (!isTouch) showMenuPermanent = !showMenuPermanent;
     }}
     ontouchend={() => (showMenuPermanent = !showMenuPermanent)}
   >
     <img class="absolute w-full h-full p-1 pixelated" src={MenuButton.src} alt="menu" />
     <img
       class="opacity-0 transition-opacity delay-50 group-hover/menu-button:opacity-100 absolute w-full h-full p-[3px] pixelated"
-      class:opacity-100={isOpen || (isTouch && showMenuPermanent)}
+      class:opacity-100={isOpen || showMenuPermanent}
       src={MenuSelectedFrame.src}
       alt="menu hover"
     />
@@ -150,7 +145,9 @@
           <a
             class="btn btn-square border-none group/menu-item relative w-[3.5rem] h-[3.5rem] flex justify-center items-center"
             href={navPath.href}
-            onclick={() => navigate(navPath.href)}
+            onclick={(e) => {
+              if (navPath.active) e.preventDefault();
+            }}
           >
             <div
               style="background-image: url({MenuInventoryBar.src}); background-position: -{i * 3.5}rem 0;"