({ delay: 0, preventdefault: true, touchAction: "pan-left" })} onpanup={(e: GestureCustomEvent) => { if (!panStart || !panStartTime || !panX) { return; } // measure the pan velocity to determine if the menu should snap open or closed const drawerWidth = window.innerWidth; const trueX = e.detail.x + (panX / 100) * drawerWidth; const panDuration = Date.now() - panStartTime; const panVelocity = (trueX - panStart) / panDuration; panX = undefined; panStart = undefined; panStartTime = undefined; if (panVelocity < -0.5 || trueX < 50) { isOpen = !isOpen; } }} onpan={(e: PanCustomEvent) => { if (e.detail.pointerType !== "touch") { panX = undefined; panStart = undefined; panStartTime = undefined; return; } panX ??= 0; panStart ??= e.detail.x; panStartTime ??= Date.now(); const drawerWidth = window.innerWidth; const trueX = e.detail.x + (panX / 100) * drawerWidth; const percentage = ((trueX - panStart) / drawerWidth) * 100; panX = Math.max(-100, Math.min(0, percentage)); tween.set(panX, { instant: true }); }} style="transform: translateX({Math.max(-100, Math.min(0, tween.current))}%);" class="fixed inset-0 z-30 grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto,auto] bg-white pt-4 dark:bg-gray-900 md:hidden" > {#if page.url.pathname === base + "/"} {/if} {@render children?.()}