fix menu sometimes collapsing when navigation on pc
deploy / build-and-deploy (push) Successful in 20s
deploy / build-and-deploy (push) Successful in 20s
This commit is contained in:
1 parent
b5e84059eb
commit
806820838b
1 file changed
+9
-1
@@ -58,6 +58,7 @@
|
||||
let isTouch = $state(false);
|
||||
let isOpen = $state(false);
|
||||
let windowHeight = $state(0);
|
||||
let pageLoadTimestamp = $state(0);
|
||||
|
||||
// lifecycle
|
||||
$effect(() => {
|
||||
@@ -71,6 +72,8 @@
|
||||
new MutationObserver(() => setTimeout(updateActiveNavPath)).observe(document.head, { childList: true });
|
||||
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
pageLoadTimestamp = Date.now();
|
||||
|
||||
const touchStartListener = () => {
|
||||
isTouch = true;
|
||||
};
|
||||
@@ -127,7 +130,12 @@
|
||||
class:hidden={!(isOpen || showMenuPermanent)}
|
||||
class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
|
||||
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"
|
||||
>
|
||||
<ul class="bg-base-200 rounded">
|
||||
|
||||
Reference in new issue
Block a user