From e327dab1df8aa747966027dd7c36aa2f16ce2494 Mon Sep 17 00:00:00 2001
From: Khairul Hidayat <me@khairul.my.id>
Date: Mon, 4 Nov 2024 02:46:23 +0000
Subject: [PATCH] feat: update for mobile

---
 src/launcher.ts | 20 ++++++++++++++++----
 src/style.css   |  4 ++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/launcher.ts b/src/launcher.ts
index 5ef0a28..12cdc22 100644
--- a/src/launcher.ts
+++ b/src/launcher.ts
@@ -183,6 +183,7 @@ const title = launcher.querySelector(".title") as HTMLButtonElement;
 const itemContainer = launcher.querySelector(".items") as HTMLDivElement;
 
 let isLauncherOpen = false;
+let startY = 0;
 
 export const openLauncher = () => {
   launcher.classList.add("open");
@@ -196,19 +197,28 @@ export const closeLauncher = () => {
   isLauncherOpen = false;
 };
 
-const onScroll = (e: WheelEvent) => {
-  if (e.deltaY > 10 && !isLauncherOpen) {
+const onScroll = (deltaY: number) => {
+  if (deltaY > 10 && !isLauncherOpen) {
     openLauncher();
     return;
   }
 
   const curScroll = launcher.scrollTop;
-  if (e.deltaY < -50 && isLauncherOpen && curScroll <= 1) {
+  if (deltaY < -50 && isLauncherOpen && curScroll <= 1) {
     closeLauncher();
     return;
   }
 };
 
+const onTouchStart = (e: TouchEvent) => {
+  startY = e.touches[0].clientY;
+};
+
+const onTouchMove = (e: TouchEvent) => {
+  const curY = e.touches[0].clientY;
+  onScroll(startY - curY);
+};
+
 export const initLauncher = () => {
   itemContainer.innerHTML = launcherItems
     .filter((item) => item.disabled !== true)
@@ -226,7 +236,9 @@ export const initLauncher = () => {
 
   title.addEventListener("click", closeLauncher);
   openBtn.addEventListener("click", openLauncher);
-  document.addEventListener("wheel", onScroll);
+  document.addEventListener("wheel", (e) => onScroll(e.deltaY));
+  document.addEventListener("touchstart", onTouchStart);
+  document.addEventListener("touchmove", onTouchMove);
 
   launcher.addEventListener("click", (e) => {
     if (e.target === launcher) {
diff --git a/src/style.css b/src/style.css
index ca89d74..a085566 100644
--- a/src/style.css
+++ b/src/style.css
@@ -5,7 +5,7 @@
 html,
 body,
 #app {
-  @apply w-full min-h-screen max-h-dvh relative bg-gray-900 overflow-hidden p-0;
+  @apply w-full h-screen max-h-dvh relative bg-gray-900 overflow-hidden p-0;
 }
 
 .background {
@@ -45,7 +45,7 @@ body,
 }
 
 .quick-launch .items {
-  @apply bg-white/10 backdrop-blur-[3px] shadow-lg p-4 rounded-xl flex items-center gap-4;
+  @apply bg-white/10 backdrop-blur-[3px] shadow-lg p-4 rounded-xl flex items-center gap-4 overflow-x-auto max-w-[90%];
 }
 
 .quick-launch .item {