feat(nav): improve mobile navigation with pan gesture to close (#1729)

feat(nav): improve mobile navigation with pan gesture to close conv drawer

src/lib/components/MobileNav.svelte

@@ -4,33 +4,49 @@
 	import { base } from "$app/paths";
 	import { page } from "$app/state";
 	import IconNew from "$lib/components/icons/IconNew.svelte";
-	import { createEventDispatcher } from "svelte";
-	import { fly } from "svelte/transition";
+	import { Spring } from "svelte/motion";
 	import CarbonClose from "~icons/carbon/close";
 	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
-	import { swipe, type SwipeCustomEvent } from "svelte-gestures";
+	import { pan, type GestureCustomEvent, type PanCustomEvent } from "svelte-gestures";
 	interface Props {
-		isOpen?: boolean;
 		title: string | undefined;
 		children?: import("svelte").Snippet;
 	}
 
-	let { isOpen = false, title = $bindable(), children }: Props = $props();
+	let { title = $bindable(), children }: Props = $props();
 
 	let closeEl: HTMLButtonElement | undefined = $state();
 	let openEl: HTMLButtonElement | undefined = $state();
 
+	let isOpen = $state(false);
+	let panX: number | undefined = $state(undefined);
+	let panStart: number | undefined = $state(undefined);
+	let panStartTime: number | undefined = undefined;
+
+	const tween = Spring.of(
+		() => {
+			if (panX !== undefined) {
+				return panX;
+			}
+			if (isOpen) {
+				return 0 as number;
+			}
+			return -100 as number;
+		},
+		{ stiffness: 0.2, damping: 0.8 }
+	);
+
 	$effect(() => {
 		title ??= "New Chat";
 	});
 
-	const dispatch = createEventDispatcher();
 	beforeNavigate(() => {
-		dispatch("toggle", false);
+		isOpen = false;
 	});
 
 	let shouldFocusClose = $derived(isOpen && closeEl);
 	let shouldRefocusOpen = $derived(!isOpen && browser && document.activeElement === closeEl);
+
 	$effect(() => {
 		if (shouldFocusClose) {
 			closeEl?.focus();
@@ -46,7 +62,7 @@
 	<button
 		type="button"
 		class="-ml-3 flex size-12 shrink-0 items-center justify-center text-lg"
-		onclick={() => dispatch("toggle", true)}
+		onclick={() => (isOpen = true)}
 		aria-label="Open menu"
 		bind:this={openEl}><CarbonTextAlignJustify /></button
 	>
@@ -60,27 +76,61 @@
 	>
 </nav>
 
-{#if isOpen}
-	<nav
-		use:swipe={() => ({ timeframe: 500, minSwipeDistance: 30 })}
-		onswipe={(ev: SwipeCustomEvent) => {
-			if (ev.detail.direction === "left") {
-				dispatch("toggle", false);
-			}
-		}}
-		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"
-		in:fly={{ x: -window.innerWidth, duration: 250 }}
-		out:fly={{ x: -window.innerWidth, duration: 250 }}
-	>
-		{#if page.url.pathname === base + "/"}
-			<button
-				type="button"
-				class="absolute right-0 top-0 z-10 flex size-12 items-center justify-center text-lg"
-				onclick={() => dispatch("toggle", false)}
-				aria-label="Close menu"
-				bind:this={closeEl}><CarbonClose /></button
-			>
-		{/if}
-		{@render children?.()}
-	</nav>
-{/if}
+<nav
+	use:pan={() => ({ delay: 100, 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;
+
+		console.log(panVelocity, trueX);
+		if (panVelocity < -1 || 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 + "/"}
+		<button
+			type="button"
+			class="absolute right-0 top-0 z-10 flex size-12 items-center justify-center text-lg"
+			onclick={() => (isOpen = false)}
+			aria-label="Close menu"
+			bind:this={closeEl}><CarbonClose /></button
+		>
+	{/if}
+	{@render children?.()}
+</nav>

src/lib/components/NavMenu.svelte

@@ -85,7 +85,9 @@
 	});
 </script>
 
-<div class="sticky top-0 flex flex-none items-center justify-between px-1.5 py-3.5 max-sm:pt-0">
+<div
+	class="sticky top-0 flex flex-none touch-none items-center justify-between px-1.5 py-3.5 max-sm:pt-0"
+>
 	<a
 		class="flex items-center rounded-xl text-lg font-semibold"
 		href="{envPublic.PUBLIC_ORIGIN}{base}/"
@@ -104,7 +106,7 @@
 	{/if}
 </div>
 <div
-	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 text-[.9rem] dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
+	class="scrollbar-custom flex touch-pan-y flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 text-[.9rem] dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
 >
 	{#await groupedConversations}
 		{#if $page.data.nConversations > 0}
@@ -136,7 +138,7 @@
 	{/await}
 </div>
 <div
-	class="mt-0.5 flex flex-col gap-1 rounded-r-xl p-3 text-sm md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
+	class="mt-0.5 flex touch-none flex-col gap-1 rounded-r-xl p-3 text-sm md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
 >
 	{#if user?.username || user?.email}
 		<form

src/routes/+layout.svelte

@@ -33,7 +33,6 @@
 		data.conversations && untrack(() => (conversations = data.conversations));
 	});
 
-	let isNavOpen = $state(false);
 	let isNavCollapsed = $state(false);
 
 	let overloadedModalOpen = $state(false);
@@ -259,7 +258,7 @@
 			: 'left-0'} *:transition-transform"
 	/>
 
-	<MobileNav isOpen={isNavOpen} on:toggle={(ev) => (isNavOpen = ev.detail)} title={mobileNavTitle}>
+	<MobileNav title={mobileNavTitle}>
 		<NavMenu
 			{conversations}
 			user={data.user}