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,9 +38,16 @@ const Menu = ({ open, onClose, children }) => {
     }
   }, [rect, open]);
 
-  const bind = useDrag(({ down, movement: [mx, my] }) => {
+  const bind = useDrag(
+    ({ down, movement: [mx] }) => {
       setX(mx > 0 ? 0 : mx);
 
+      if (down) {
+        setDragging(true);
+      } else {
+        setDragging(false);
+      }
+
       // If the drag ended, snap the menu back
       if (!down) {
         const mid = -rect.width;
@@ -37,21 +60,33 @@ const Menu = ({ open, onClose, children }) => {
           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>
-        <a
-          href="#"
-          className="text-gray-800 hover:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
-        >
-          Calendar
-        </a>
-      </li>
+      <MenuItem>Home</MenuItem>
+      <MenuItem>Profile</MenuItem>
+      <MenuItem>Settings</MenuItem>
     </ul>
   </>
 );