Modal animation and dialog

components/Dialog.jsx

@@ -0,0 +1,9 @@
+const Dialog = () => (
+  <div className="fixed inset-0 w-full h-full flex align-center justify-center">
+    <div className="w-200 bg-white rounded-xl">
+      <div className="flex-1">{children}</div>
+    </div>
+  </div>
+);
+
+export default Dialog;

components/Modal.jsx

@@ -55,9 +55,9 @@ const Modal = ({ open, onClose, children }) => {
       ref={ref}
       {...bind()}
       className={classNames(
-        'fixed z-40 top-5 transform transform-gpu ease-in-out duration-300 translate w-full h-full bg-white rounded-t-lg',
+        'fixed z-40 top-5 transform transform-gpu ranslate w-full h-full bg-white rounded-t-lg',
         {
-          'transition-transform': !dragging,
+          'ease-in-out duration-300 transition-transformation': !dragging,
         }
       )}
       style={{

components/Nav.jsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Plugins } from '@capacitor/core';
 import Store from '../store';
 
-const Nav = ({ page, onShowMenu }) => {
+const Nav = ({ page }) => {
   const [showMenu, setShowMenu] = useState(false);
 
   useEffect(() => {
@@ -23,7 +23,11 @@ const Nav = ({ page, onShowMenu }) => {
         <div className="relative flex items-center justify-between h-16">
           <div
             className="absolute inset-y-0 left-0 flex items-center sm:hidden"
-            onClick={onShowMenu}
+            onClick={() =>
+              Store.update(s => {
+                s.showMenu = true;
+              })
+            }
           >
             {/* Mobile menu button*/}
             <button

pages/index.js

@@ -76,12 +76,6 @@ export default function Index() {
   const showMenu = Store.useState(s => s.showMenu);
   const showNotifications = Store.useState(s => s.showNotifications);
 
-  const openMenu = () => {
-    Store.update(s => {
-      s.showMenu = true;
-    });
-  };
-
   const closeMenu = () => {
     Store.update(s => {
       s.showMenu = false;
@@ -101,12 +95,14 @@ export default function Index() {
     });
   };
 
+  // This is an example app layout. We've got a hidden menu that will be toggled
+  //
   return (
     <App>
       <Menu open={showMenu} onClose={closeMenu}>
         <MenuContent />
       </Menu>
-      <Nav page={page} onShowMenu={openMenu} />
+      <Nav page={page} />
       <CurrentPage page={page} />
       <TabBar>
         {pages.map(p => (