fix menu sometimes collapsing when navigation on pc
deploy / build-and-deploy (push) Successful in 20s

This commit is contained in:
bytedream committed 2026-10-31 14:17:46 +01:00
1 parent b5e84059eb
commit 806820838b
1 file changed
+9 -1
+9 -1
View File
@@ -58,6 +58,7 @@
let isTouch = $state(false); let isTouch = $state(false);
let isOpen = $state(false); let isOpen = $state(false);
let windowHeight = $state(0); let windowHeight = $state(0);
let pageLoadTimestamp = $state(0);
// lifecycle // lifecycle
$effect(() => { $effect(() => {
@@ -71,6 +72,8 @@
new MutationObserver(() => setTimeout(updateActiveNavPath)).observe(document.head, { childList: true }); new MutationObserver(() => setTimeout(updateActiveNavPath)).observe(document.head, { childList: true });
document.addEventListener('astro:page-load', () => { document.addEventListener('astro:page-load', () => {
pageLoadTimestamp = Date.now();
const touchStartListener = () => { const touchStartListener = () => {
isTouch = true; isTouch = true;
}; };
@@ -127,7 +130,12 @@
class:hidden={!(isOpen || showMenuPermanent)} class:hidden={!(isOpen || showMenuPermanent)}
class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'} class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
onmouseenter={() => (!isTouch && (isOpen = true))} onmouseenter={() => (!isTouch && (isOpen = true))}
onmouseleave={() => (!isTouch && (isOpen = false))} onmouseleave={() => {
if (isTouch) return;
// when navigated, the page reload may take a few ms and the menu isn't rendered, which js interprets as an mouse leave
// event. with the 50ms threshold this is mostly fixed, except for maybe slow connections
else if ((Date.now() - pageLoadTimestamp) > 50) isOpen = false;
}}
role="tooltip" role="tooltip"
> >
<ul class="bg-base-200 rounded"> <ul class="bg-base-200 rounded">