Modal

pages/index.js

@@ -3,12 +3,14 @@ import { useCallback, useState } from 'react';
 import App from '../components/App';
 import Backdrop from '../components/Backdrop';
 import Menu from '../components/Menu';
+import Modal from '../components/Modal';
 import Nav from '../components/Nav';
 import Home from '../components/pages/Home';
 import Profile from '../components/pages/Profile';
 import Settings from '../components/pages/Settings';
 import Tab from '../components/Tab';
 import TabBar from '../components/TabBar';
+import Store from '../store';
 
 const pages = [
   { id: 'home', title: 'Home', icon: 'home-outline', selectedIcon: 'home', component: Home },
@@ -62,18 +64,46 @@ const MenuContent = () => (
   </>
 );
 
+const NotificationsContent = () => (
+  <div className="p-4">
+    <h2 className="text-xl">Notifications</h2>
+  </div>
+);
+
 export default function Index() {
   const [page, setPage] = useState(pages[0]);
 
-  const [showMenu, setShowMenu] = useState(false);
+  const showMenu = Store.useState(s => s.showMenu);
+  const showNotifications = Store.useState(s => s.showNotifications);
 
-  const openMenu = useCallback(() => {
-    setShowMenu(true);
-  }, []);
+  const openMenu = () => {
+    Store.update(s => {
+      s.showMenu = true;
+    });
+  };
+
+  const closeMenu = () => {
+    Store.update(s => {
+      s.showMenu = false;
+    });
+  };
+
+  const backdropClose = () => {
+    Store.update(s => {
+      s.showMenu = false;
+      s.showNotifications = false;
+    });
+  };
+
+  const closeNotifications = () => {
+    Store.update(s => {
+      s.showNotifications = false;
+    });
+  };
 
   return (
     <App>
-      <Menu open={showMenu} onClose={() => setShowMenu(false)}>
+      <Menu open={showMenu} onClose={closeMenu}>
         <MenuContent />
       </Menu>
       <Nav page={page} onShowMenu={openMenu} />
@@ -83,7 +113,10 @@ export default function Index() {
           <Tab key={p.id} {...p} onClick={() => setPage(p)} selected={p.id === page.id} />
         ))}
       </TabBar>
-      <Backdrop open={showMenu} onClose={() => setShowMenu(false)} />
+      <Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
+      <Modal open={showNotifications} onClose={closeNotifications}>
+        <NotificationsContent />
+      </Modal>
     </App>
   );
 }