List items and modal

components/Button.jsx

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+
+const Button = ({ children, className, ...props }) => (
+  <button
+    {...props}
+    class={classNames(
+      'inline-block text-xs font-medium leading-6 text-center uppercase transition rounded-lg ripple focus:outline-none',
+      className
+    )}
+  >
+    {children}
+  </button>
+);
+
+export default Button;

components/Content.jsx

@@ -1,12 +1,15 @@
 import classNames from 'classnames';
 
-const Content = ({ className, visible, children }) => (
-  <div className={classNames(`h-full overflow-auto py-2 absolute top-0`, className, {
-    visible,
-    invisible: !visible
-  })}>
+const Content = ({ className, visible, children, ...props }) => (
+  <div
+    {...props}
+    className={classNames(`h-full w-full overflow-auto py-2 absolute top-0`, className, {
+      visible,
+      invisible: !visible,
+    })}
+  >
     {children}
   </div>
 );
 
-export default Content;
+export default Content;

components/EdgeDrag.jsx

@@ -0,0 +1,3 @@
+const EdgeDrag = () => null;
+
+export default EdgeDrag;

components/List.jsx

@@ -0,0 +1,3 @@
+const List = ({ children, ...props }) => <div {...props}>{children}</div>;
+
+export default List;

components/ListItem.jsx

@@ -0,0 +1,9 @@
+import classNames from 'classnames';
+
+const ListItem = ({ children, className, ...props }) => (
+  <div className={classNames('p-4', className)} {...props}>
+    {children}
+  </div>
+);
+
+export default ListItem;

components/Menu.jsx

@@ -4,7 +4,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { useDrag } from 'react-use-gesture';
 
-const Menu = ({ open, onClose, children }) => {
+const Menu = ({ open, onClose, children, className, ...props }) => {
   const ref = useRef();
   const [x, setX] = useState(-100000);
   const [rect, setRect] = useState(null);
@@ -68,6 +68,7 @@ const Menu = ({ open, onClose, children }) => {
 
   return (
     <div
+      {...props}
       {...bind()}
       ref={ref}
       style={{
@@ -78,15 +79,10 @@ const Menu = ({ open, onClose, children }) => {
       }}
       className={classNames(
         'fixed z-40 transform transform-gpu translate w-48 h-full bg-gray-100',
+        className,
         {
           'transition-transform': !dragging,
         }
-        /*
-        {
-          '-translate-x-full': !open,
-          '-translate-x-0': open,
-        }
-        */
       )}
     >
       {children}

components/Modal.jsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-use-gesture';
 
 const Modal = ({ open, onClose, children }) => {
@@ -7,24 +7,46 @@ const Modal = ({ open, onClose, children }) => {
   const [dragging, setDragging] = useState(false);
   const [rect, setRect] = useState(null);
   const [y, setY] = useState(100000);
+  const [safeAreaTop, setSafeAreaTop] = useState(0);
 
+  const _open = useCallback(() => {
+    setY(safeAreaTop);
+  }, [safeAreaTop]);
+
+  const _close = useCallback(() => {
+    if (!rect) {
+      return;
+    }
+    setY(rect.height + safeAreaTop);
+  }, [safeAreaTop, rect]);
+
+  // Get pixel value of safe area insets
+  useEffect(() => {
+    const safeAreaTop = parseInt(
+      getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top')
+    );
+    setSafeAreaTop(safeAreaTop);
+  }, []);
+
+  // Get the layout rectangle for the modal
   useLayoutEffect(() => {
     const rect = ref.current?.getBoundingClientRect();
     setRect(rect);
-    setY(-rect.width);
+    _close();
   }, []);
 
+  // If open changes, open/close the modal
   useLayoutEffect(() => {
     if (open) {
-      setY(0);
-    } else if (rect) {
-      setY(rect.height);
+      _open();
+    } else {
+      _close();
     }
-  }, [rect, open]);
+  }, [rect, open, _open, _close]);
 
   const bind = useDrag(
     ({ down, movement: [mx, my] }) => {
-      setY(my < 0 ? 0 : my);
+      setY(my < 0 ? safeAreaTop : my + safeAreaTop);
 
       if (down) {
         setDragging(true);
@@ -32,16 +54,16 @@ const Modal = ({ open, onClose, children }) => {
         setDragging(false);
       }
 
-      // If the drag ended, snap the menu back
+      // If the drag ended, snap the menu back open or close it
       if (!down) {
         const mid = rect.height;
         if (y > mid / 2) {
           // Close
-          setY(rect.height);
+          _close();
           onClose();
         } else {
           // Re-open
-          setY(0);
+          _open();
         }
       }
     },
@@ -55,13 +77,13 @@ const Modal = ({ open, onClose, children }) => {
       ref={ref}
       {...bind()}
       className={classNames(
-        'fixed z-40 top-5 transform transform-gpu ranslate 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-xl',
         {
           'ease-in-out duration-300 transition-transformation': !dragging,
         }
       )}
       style={{
-        height: `calc(100% - 1.25rem)`,
+        height: `calc(100% - env(safe-area-inset-top, 0px) - 1.25rem)`,
         touchAction: 'pan-y',
         transform: `translateY(${y}px)`,
       }}

components/pages/Feed.jsx

@@ -0,0 +1,24 @@
+import Content from '../Content';
+
+import { Virtuoso } from 'react-virtuoso';
+import List from '../List';
+import ListItem from '../ListItem';
+
+const Feed = ({ selected }) => {
+  return (
+    <Content visible={selected} className="p-4">
+      <List className="h-full w-full">
+        {selected && (
+          <Virtuoso
+            totalCount={1000}
+            overscan={200}
+            style={{ height: '100%', width: '100%' }}
+            itemContent={index => <ListItem>Item {index}</ListItem>}
+          />
+        )}
+      </List>
+    </Content>
+  );
+};
+
+export default Feed;

components/pages/Profile.jsx

@@ -1,12 +0,0 @@
-import { homeItems } from "../../data";
-import Content from "../Content";
-
-const Profile = ({ selected }) => {
-  return (
-    <Content visible={selected} className="p-4">
-      <h2>Profile</h2>
-    </Content>
-  )
-}
-
-export default Profile;