Drag menu

components/Menu.jsx

@@ -1,7 +1,51 @@
 import classNames from 'classnames';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
-const Menu = ({ open, onClose }) => (
+import { useDrag } from 'react-use-gesture';
+
+const Menu = ({ open, onClose, children }) => {
+  const ref = useRef();
+  const [x, setX] = useState(-100000);
+  const [rect, setRect] = useState(null);
+
+  useLayoutEffect(() => {
+    const rect = ref.current?.getBoundingClientRect();
+    setRect(rect);
+    setX(-rect.width);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (open) {
+      setX(0);
+    } else if (rect) {
+      setX(-rect.width);
+    }
+  }, [rect, open]);
+
+  const bind = useDrag(({ down, movement: [mx, my] }) => {
+    setX(mx > 0 ? 0 : mx);
+
+    // If the drag ended, snap the menu back
+    if (!down) {
+      const mid = -rect.width;
+      if (x < mid / 2) {
+        // Close
+        setX(-rect.width);
+        onClose();
+      } else {
+        // Re-open
+        setX(0);
+      }
+    }
+  });
+
+  return (
     <div
+      {...bind()}
+      ref={ref}
+      style={{
+        transform: `translateX(${x}px)`,
+      }}
       className={classNames(
         'fixed z-40 transform transform-gpu translate w-48 h-full bg-gray-100 transition-transform',
         {
@@ -10,20 +54,9 @@ const Menu = ({ open, onClose }) => (
         }
       )}
     >
-    <div className="p-4">
+      {children}
-      <h2 className="text-xl select-none">Menu</h2>
-    </div>
-    <ul>
-      <li>
-        <a
-          href="#"
-          className="text-gray-800 hover:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
-        >
-          Calendar
-        </a>
-      </li>
-    </ul>
     </div>
   );
+};
 
 export default Menu;

package-lock.json

@@ -4322,6 +4322,12 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-use-gesture": {
+      "version": "9.0.0-beta.11",
+      "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.0.0-beta.11.tgz",
+      "integrity": "sha512-lpn39vmrDu/zB2bNx7rjaL0+Gjm17a9mzn53bX9IP4TIjMUxXlsB0IkiFj/B23F0vq1A9ozDLGHl2OaXkKJcBg==",
+      "dev": true
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "tailwindcss": "^2.0.2"
   },
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "prettier": "^2.2.1",
+    "react-use-gesture": "^9.0.0-beta.11"
   }
 }

pages/index.js

@@ -39,6 +39,24 @@ const CurrentPage = ({ page }) => {
   );
 };
 
+const MenuContent = () => (
+  <>
+    <div className="p-4">
+      <h2 className="text-xl select-none">Menu</h2>
+    </div>
+    <ul>
+      <li>
+        <a
+          href="#"
+          className="text-gray-800 hover:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
+        >
+          Calendar
+        </a>
+      </li>
+    </ul>
+  </>
+);
+
 export default function Index() {
   const [page, setPage] = useState(pages[0]);
 
@@ -50,7 +68,9 @@ export default function Index() {
 
   return (
     <App>
-      <Menu open={showMenu} onClose={() => setShowMenu(false)} />
+      <Menu open={showMenu} onClose={() => setShowMenu(false)}>
+        <MenuContent />
+      </Menu>
       <Nav page={page} onShowMenu={openMenu} />
       <CurrentPage page={page} />
       <TabBar>