Shell

components/App.jsx

@@ -0,0 +1,7 @@
+const App = ({ children }) => (
+  <div className="flex h-screen flex-col">
+    {children}
+  </div>
+);
+
+export default App;

components/Content.jsx

@@ -0,0 +1,11 @@
+const Content = ({ className, children }) => (
+  <div
+  className={`${className} flex-1 overflow-auto"`}
+  style={{
+    paddingTop: `calc(env(safe-area-inset-top, 0px) + 16px)`, // Care for the notch
+  }}>
+    {children}
+  </div>
+);
+
+export default Content;

components/Nav.jsx

@@ -6,7 +6,7 @@ const Nav = ({ page }) => {
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
   return (
-    <nav className="bg-gray-800 fixed w-full" id="nav">
+    <nav className="bg-gray-800 w-full flex-0 h-auto">
       <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
         <div className="relative flex items-center justify-between h-16">
           <div

components/TabBar.jsx

@@ -1,9 +1,12 @@
 const TabBar = ({ children }) => (
-  
-  <nav id="tab-bar" className="h-16 bg-white fixed bottom-0 w-full flex justify-center items-center bg-gray-50">
+  <nav
+    id="tab-bar"
+    className="py-2 h-16 bg-white bottom-0 w-full flex justify-center items-start bg-gray-50"
+    style={{
+      height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`
+    }}>
     {children}
   </nav>
-  
 )
 
 export default TabBar;

components/pages/Home.jsx

@@ -1,13 +1,14 @@
 import { homeItems } from "../../data";
 import PostCard from "../Card";
+import Content from "../Content";
 
 const Home = () => {
   return (
-    <div class="py-32">
+    <Content>
       {homeItems.map(i => (
         <PostCard {...i} />
       ))}
-    </div>
+    </Content>
   )
 }
 

components/pages/Profile.jsx

@@ -1,10 +1,11 @@
 import { homeItems } from "../../data";
+import Content from "../Content";
 
 const Profile = () => {
   return (
-    <div class="py-32">
+    <Content>
       <h2>Profile</h2>
-    </div>
+    </Content>
   )
 }
 

components/pages/Settings.jsx

@@ -1,8 +1,10 @@
+import Content from "../Content";
+
 const Settings = () => {
   return (
-    <div class="py-32">
+    <Content className="p-4">
       <h2>Settings</h2>
-    </div>
+    </Content>
   )
 }