do not reload site when choosing active menu entry on menu bar
deploy / build-and-deploy (push) Successful in 21s

This commit is contained in:
bytedream committed 2026-11-02 00:55:12 +01:00
1 parent 9234d29ea3
commit 82224a769f
1 file changed
+9 -12
+9 -12
View File
@@ -8,7 +8,6 @@
import MenuButton from '@assets/img/menu-button.webp'; import MenuButton from '@assets/img/menu-button.webp';
import MenuInventoryBar from '@assets/img/menu-inventory-bar.webp'; import MenuInventoryBar from '@assets/img/menu-inventory-bar.webp';
import MenuSelectedFrame from '@assets/img/menu-selected-frame.webp'; import MenuSelectedFrame from '@assets/img/menu-selected-frame.webp';
import { navigate } from 'astro:transitions/client';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
// html bindings // html bindings
@@ -65,6 +64,8 @@
}); });
onMount(() => { onMount(() => {
updateActiveNavPath();
document.addEventListener('astro:page-load', () => { document.addEventListener('astro:page-load', () => {
const touchStartListener = () => { const touchStartListener = () => {
isTouch = true; isTouch = true;
@@ -87,8 +88,8 @@
// functions // functions
function updateActiveNavPath() { function updateActiveNavPath() {
for (let i = 0; i < navPaths.length; i++) { for (const navPath of navPaths) {
navPaths[i].active = new URL(document.baseURI).pathname + navPaths[i].href === window.location.pathname; navPath.active = new URL(document.baseURI).pathname + navPath.href === window.location.pathname;
} }
} }
</script> </script>
@@ -102,20 +103,14 @@
<button <button
class={isTouch ? 'btn btn-square relative w-16 h-16' : 'btn btn-square group/menu-button relative w-16 h-16'} class={isTouch ? 'btn btn-square relative w-16 h-16' : 'btn btn-square group/menu-button relative w-16 h-16'}
onclick={() => { onclick={() => {
if (!isTouch) { if (!isTouch) showMenuPermanent = !showMenuPermanent;
let activePath = navPaths.find((path) => path.active);
if (activePath !== undefined) {
navigate(activePath.href);
}
showMenuPermanent = !showMenuPermanent;
}
}} }}
ontouchend={() => (showMenuPermanent = !showMenuPermanent)} ontouchend={() => (showMenuPermanent = !showMenuPermanent)}
> >
<img class="absolute w-full h-full p-1 pixelated" src={MenuButton.src} alt="menu" /> <img class="absolute w-full h-full p-1 pixelated" src={MenuButton.src} alt="menu" />
<img <img
class="opacity-0 transition-opacity delay-50 group-hover/menu-button:opacity-100 absolute w-full h-full p-[3px] pixelated" 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} src={MenuSelectedFrame.src}
alt="menu hover" alt="menu hover"
/> />
@@ -150,7 +145,9 @@
<a <a
class="btn btn-square border-none group/menu-item relative w-[3.5rem] h-[3.5rem] flex justify-center items-center" class="btn btn-square border-none group/menu-item relative w-[3.5rem] h-[3.5rem] flex justify-center items-center"
href={navPath.href} href={navPath.href}
onclick={() => navigate(navPath.href)} onclick={(e) => {
if (navPath.active) e.preventDefault();
}}
> >
<div <div
style="background-image: url({MenuInventoryBar.src}); background-position: -{i * 3.5}rem 0;" style="background-image: url({MenuInventoryBar.src}); background-position: -{i * 3.5}rem 0;"