Drag menu

components/Menu.jsx

@@ -1,29 +1,62 @@
 import classNames from 'classnames';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
-const Menu = ({ open, onClose }) => (
-  <div
-    className={classNames(
-      'fixed z-40 transform transform-gpu translate w-48 h-full bg-gray-100 transition-transform',
-      {
-        '-translate-x-full': !open,
-        '-translate-x-0': open,
+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);
       }
-    )}
-  >
-    <div className="p-4">
-      <h2 className="text-xl select-none">Menu</h2>
+    }
+  });
+
+  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',
+        {
+          '-translate-x-full': !open,
+          '-translate-x-0': open,
+        }
+      )}
+    >
+      {children}
     </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;