Make bottom sheet swipeable down to dismiss

2026-05-15 22:37:34 +02:00
parent a4014182a0
commit 26c5c119f0
2 changed files with 21 additions and 4 deletions
@@ -219,8 +219,23 @@ function HomePage() {
      {isMobile && expandedCard && (
        <>
          <div className="sheet-backdrop" onClick={() => setExpandedCardId(null)} />
-          <div className="bottom-sheet">
-            <div className="sheet-handle" />
+          <div
+            className="bottom-sheet"
+            onTouchStart={e => { e._sheetStartY = e.touches[0].clientY; }}
+            onTouchMove={e => {
+              const dy = e.touches[0].clientY - e._sheetStartY;
+              if (dy > 0) e.currentTarget.style.transform = `translateY(${dy}px)`;
+            }}
+            onTouchEnd={e => {
+              const dy = e.changedTouches[0].clientY - e._sheetStartY;
+              if (dy > 80) {
+                setExpandedCardId(null);
+              } else {
+                e.currentTarget.style.transform = '';
+              }
+            }}
+          >
+            <div className="sheet-handle" style={{ cursor: 'grab' }} />
            <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '12px' }}>
              {cardDetailContent(expandedCard)}
            </div>