Edge drag detection for menu

README.md

@@ -24,7 +24,10 @@ There are currently snippets for the following common mobile components:
 - [x] Content
 - [x] Tabs
 - [ ] Nav (in progress)
+- [x] Icon
 - [x] Menu
 - [x] Modal
 - [ ] Dialog
-- [ ] Card
+- [x] Button
+- [x] Card
+- [x] Safe Area

components/ui/App.jsx

@@ -1,5 +1,7 @@
-const App = ({ children }) => (
-  <div className="flex h-screen flex-col">
+import classNames from 'classnames';
+
+const App = ({ children, className, ...props }) => (
+  <div {...props} className={classNames('flex h-screen flex-col', className)}>
     {children}
   </div>
 );

pages/index.js

@@ -135,9 +135,15 @@ export default function Index() {
     });
   };
 
+  // To enable edge drag detection to open the side menu
   const bind = useDrag(
-    ({ down, movement: [mx] }) => {
-      console.log('DRAGGING SIDE', mx);
+    ({ down, movement: [mx], xy: [x, y], cancel }) => {
+      if (mx > 5 && x < 50 && down) {
+        Store.update(s => {
+          s.showMenu = true;
+        });
+        cancel();
+      }
     },
     {
       axis: 'x',