From ebead6b1abf757fb19236d6c7c38a1d9a226dbac Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Mon, 21 Dec 2020 19:49:37 -0600
Subject: [PATCH] Modal animation and dialog

---
 components/Dialog.jsx |  9 +++++++++
 components/Modal.jsx  |  4 ++--
 components/Nav.jsx    |  8 ++++++--
 pages/index.js        | 10 +++-------
 4 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 components/Dialog.jsx

diff --git a/components/Dialog.jsx b/components/Dialog.jsx
new file mode 100644
index 0000000..c2eac8c
--- /dev/null
+++ b/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;
diff --git a/components/Modal.jsx b/components/Modal.jsx
index 574b736..1bb9cc0 100644
--- a/components/Modal.jsx
+++ b/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={{
diff --git a/components/Nav.jsx b/components/Nav.jsx
index 82c8470..03e5a22 100644
--- a/components/Nav.jsx
+++ b/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
diff --git a/pages/index.js b/pages/index.js
index abd8b8b..a9bc335 100644
--- a/pages/index.js
+++ b/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 => (