diff --git a/components/Menu.jsx b/components/Menu.jsx
index 184ab92..4ce89a0 100644
--- a/components/Menu.jsx
+++ b/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;
diff --git a/package-lock.json b/package-lock.json
index 3530f74..fecdda1 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 803175a..08869f7 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/pages/index.js b/pages/index.js
index 2968c17..529de27 100644
--- a/pages/index.js
+++ b/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>