do not reload site when choosing active menu entry on menu bar
deploy / build-and-deploy (push) Successful in 21s
deploy / build-and-deploy (push) Successful in 21s
This commit is contained in:
1 parent
9234d29ea3
commit
82224a769f
1 file changed
+9
-12
@@ -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;"
|
||||||
|
|||||||
Reference in new issue
Block a user