open sidebar on swipe (#1098)

commafeed-client/src/pages/app/Layout.tsx

@@ -19,6 +19,7 @@ import { type ReactNode, Suspense, useEffect } from "react"
 import Draggable from "react-draggable"
 import { TbMenu2, TbPlus, TbX } from "react-icons/tb"
 import { Outlet } from "react-router-dom"
+import { useSwipeable } from "react-swipeable"
 import { tss } from "tss"
 import useLocalStorage from "use-local-storage"
 
@@ -111,8 +112,18 @@ export default function Layout(props: LayoutProps) {
         </ActionIcon>
     )
 
+    const swipeHandlers = useSwipeable({
+        onSwiping: e => {
+            const threshold = document.documentElement.clientWidth / 6
+            if (e.absX > threshold) {
+                dispatch(setMobileMenuOpen(e.dir === "Right"))
+            }
+        },
+    })
+
     if (loading) return <LoadingPage />
     return (
+        <Box {...swipeHandlers}>
             <AppShell
                 header={{ height: Constants.layout.headerHeight }}
                 navbar={{
@@ -189,5 +200,6 @@ export default function Layout(props: LayoutProps) {
                     </Suspense>
                 </AppShell.Main>
             </AppShell>
+        </Box>
     )
 }