{#if isOpen}
{/if}
({ 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 * (drawerWidthPercentage / 100); 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 * (drawerWidthPercentage / 100); 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) )}%); width: {drawerWidthPercentage}%;" class:shadow-[5px_0_15px_0_rgba(0,0,0,0.3)]={isOpen} class="fixed bottom-0 left-0 top-0 z-30 grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto,auto] rounded-r-xl bg-white pt-4 dark:bg-gray-900 md:hidden" > {@render children?.()}