Modal

components/Modal.jsx

@@ -0,0 +1,74 @@
+import classNames from 'classnames';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useDrag } from 'react-use-gesture';
+
+const Modal = ({ open, onClose, children }) => {
+  const ref = useRef();
+  const [dragging, setDragging] = useState(false);
+  const [rect, setRect] = useState(null);
+  const [y, setY] = useState(100000);
+
+  useLayoutEffect(() => {
+    const rect = ref.current?.getBoundingClientRect();
+    setRect(rect);
+    setY(-rect.width);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (open) {
+      setY(0);
+    } else if (rect) {
+      setY(rect.height);
+    }
+  }, [rect, open]);
+
+  const bind = useDrag(
+    ({ down, movement: [mx, my] }) => {
+      setY(my < 0 ? 0 : my);
+
+      if (down) {
+        setDragging(true);
+      } else {
+        setDragging(false);
+      }
+
+      // If the drag ended, snap the menu back
+      if (!down) {
+        const mid = rect.height;
+        if (y > mid / 2) {
+          // Close
+          setY(rect.height);
+          onClose();
+        } else {
+          // Re-open
+          setY(0);
+        }
+      }
+    },
+    {
+      axis: 'y',
+    }
+  );
+
+  return (
+    <div
+      ref={ref}
+      {...bind()}
+      className={classNames(
+        'fixed z-40 top-5 transform transform-gpu translate w-full h-full bg-white rounded-t-lg',
+        {
+          'transition-transform': !dragging,
+        }
+      )}
+      style={{
+        height: `calc(100% - 1.25rem)`,
+        touchAction: 'pan-y',
+        transform: `translateY(${y}px)`,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Modal;

components/Nav.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { Plugins } from '@capacitor/core';
+import Store from '../store';
 
 const Nav = ({ page, onShowMenu }) => {
   const [showMenu, setShowMenu] = useState(false);
@@ -77,18 +78,6 @@ const Nav = ({ page, onShowMenu }) => {
           <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
             <div className="flex-shrink-0 flex items-center">
               <h1 className="text-gray-50">{page.title}</h1>
-              {/*}
-              <img
-                className="block lg:hidden h-8 w-auto"
-                src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
-                alt="Workflow"
-              />
-              <img
-                className="hidden lg:block h-8 w-auto"
-                src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg"
-                alt="Workflow"
-              />
-              */}
             </div>
             <div className="hidden sm:block sm:ml-6">
               <div className="flex space-x-4">
@@ -121,7 +110,14 @@ const Nav = ({ page, onShowMenu }) => {
             </div>
           </div>
           <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-            <button className="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+            <button
+              className="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+              onClick={() =>
+                Store.update(s => {
+                  s.showNotifications = true;
+                })
+              }
+            >
               <span className="sr-only">View notifications</span>
               {/* Heroicon name: bell */}
               <svg

package-lock.json

@@ -2639,6 +2639,12 @@
       "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
     },
+    "immer": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.15.tgz",
+      "integrity": "sha512-yM7jo9+hvYgvdCQdqvhCNRRio0SCXc8xDPzA25SvKWa7b1WVPjLwQs1VYU5JPXjcJPTqAa5NP5dqpORGYBQ2AA==",
+      "dev": true
+    },
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -4190,6 +4196,16 @@
         }
       }
     },
+    "pullstate": {
+      "version": "1.20.5",
+      "resolved": "https://registry.npmjs.org/pullstate/-/pullstate-1.20.5.tgz",
+      "integrity": "sha512-9+QAXjf5WugIPEFHgMTwKM42uDx8ezB1BDobh7gpg9OCta5rp1XdFxa6tLljB/4NUxnI5YqoiE2s15ZOh+sl4A==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.3",
+        "immer": "^7.0.1"
+      }
+    },
     "pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",

package.json

@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "prettier": "^2.2.1",
+    "pullstate": "^1.20.5",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^9.0.0-beta.11"
   }

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>
   );
 }

store/index.js

@@ -0,0 +1,8 @@
+import { Store as PullStateStore } from 'pullstate';
+
+const Store = new PullStateStore({
+  showMenu: false,
+  showNotifications: false,
+});
+
+export default Store;