Browse Source

feat: sidebar swipe support

Timothy J. Baek 1 year ago
parent
commit
daed66f7c6
1 changed files with 26 additions and 0 deletions
  1. 26 0
      src/lib/components/layout/Sidebar.svelte

+ 26 - 0
src/lib/components/layout/Sidebar.svelte

@@ -45,6 +45,31 @@
 			show = true;
 			show = true;
 		}
 		}
 		await chats.set(await getChatList(localStorage.token));
 		await chats.set(await getChatList(localStorage.token));
+
+		let touchstartX = 0;
+		let touchendX = 0;
+
+		function checkDirection() {
+			const screenWidth = window.innerWidth;
+			const swipeDistance = Math.abs(touchendX - touchstartX);
+			if (swipeDistance >= screenWidth / 4) {
+				if (touchendX < touchstartX) {
+					show = false;
+				}
+				if (touchendX > touchstartX) {
+					show = true;
+				}
+			}
+		}
+
+		document.addEventListener('touchstart', (e) => {
+			touchstartX = e.changedTouches[0].screenX;
+		});
+
+		document.addEventListener('touchend', (e) => {
+			touchendX = e.changedTouches[0].screenX;
+			checkDirection();
+		});
 	});
 	});
 
 
 	// Helper function to fetch and add chat content to each chat
 	// Helper function to fetch and add chat content to each chat
@@ -706,6 +731,7 @@
 	</div>
 	</div>
 
 
 	<div
 	<div
+		id="sidebar-handle"
 		class="fixed left-0 top-[50dvh] -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
 		class="fixed left-0 top-[50dvh] -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
 	>
 	>
 		<Tooltip
 		<Tooltip