Menu drag

components/Menu.jsx

@@ -1,3 +1,4 @@
+import { Plugins } from '@capacitor/core';
 import classNames from 'classnames';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
@@ -7,6 +8,21 @@ const Menu = ({ open, onClose, children }) => {
   const ref = useRef();
   const [x, setX] = useState(-100000);
   const [rect, setRect] = useState(null);
+  const [dragging, setDragging] = useState(false);
+
+  useEffect(() => {
+    try {
+      if (open) {
+        Plugins.StatusBar.setStyle({
+          style: 'LIGHT',
+        });
+      } else {
+        Plugins.StatusBar.setStyle({
+          style: 'DARK',
+        });
+      }
+    } catch (e) {}
+  }, [open]);
 
   useLayoutEffect(() => {
     const rect = ref.current?.getBoundingClientRect();
@@ -22,36 +38,55 @@ const Menu = ({ open, onClose, children }) => {
     }
   }, [rect, open]);
 
-  const bind = useDrag(({ down, movement: [mx, my] }) => {
+  const bind = useDrag(
-    setX(mx > 0 ? 0 : mx);
+    ({ down, movement: [mx] }) => {
+      setX(mx > 0 ? 0 : mx);
 
-    // If the drag ended, snap the menu back
+      if (down) {
-    if (!down) {
+        setDragging(true);
-      const mid = -rect.width;
-      if (x < mid / 2) {
-        // Close
-        setX(-rect.width);
-        onClose();
       } else {
-        // Re-open
+        setDragging(false);
-        setX(0);
       }
+
+      // 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);
+        }
+      }
+    },
+    {
+      axis: 'x',
     }
-  });
+  );
 
   return (
     <div
       {...bind()}
       ref={ref}
       style={{
+        paddingTop: `calc(env(safe-area-inset-top, 0px) + 8px)`,
+        paddingBottom: `calc(env(safe-area-inset-bottom, 0px) + 8px)`,
+        touchAction: 'pan-x',
         transform: `translateX(${x}px)`,
       }}
       className={classNames(
-        'fixed z-40 transform transform-gpu translate w-48 h-full bg-gray-100 transition-transform',
+        'fixed z-40 transform transform-gpu translate w-48 h-full bg-gray-100',
+        {
+          'transition-transform': !dragging,
+        }
+        /*
         {
           '-translate-x-full': !open,
           '-translate-x-0': open,
         }
+        */
       )}
     >
       {children}

package-lock.json

@@ -4322,6 +4322,16 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-spring": {
+      "version": "8.0.27",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+      "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "prop-types": "^15.5.8"
+      }
+    },
     "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",

package.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "prettier": "^2.2.1",
+    "react-spring": "^8.0.27",
     "react-use-gesture": "^9.0.0-beta.11"
   }
 }

pages/index.js

@@ -39,20 +39,25 @@ const CurrentPage = ({ page }) => {
   );
 };
 
+const MenuItem = ({ children }) => (
+  <li>
+    <a
+      href="#"
+      className="text-gray-800 hover:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
+    >
+      {children}
+    </a>
+  </li>
+);
 const MenuContent = () => (
   <>
     <div className="p-4">
       <h2 className="text-xl select-none">Menu</h2>
     </div>
     <ul>
-      <li>
+      <MenuItem>Home</MenuItem>
-        <a
+      <MenuItem>Profile</MenuItem>
-          href="#"
+      <MenuItem>Settings</MenuItem>
-          className="text-gray-800 hover:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
-        >
-          Calendar
-        </a>
-      </li>
     </ul>
   </>
 );