From 8b2df11c87722f670849c9c27a26c16bedc44680 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Sun, 20 Dec 2020 23:02:27 -0600
Subject: [PATCH] Shell

---
 components/App.jsx            |  7 +++++++
 components/Content.jsx        | 11 +++++++++++
 components/Nav.jsx            |  2 +-
 components/TabBar.jsx         |  9 ++++++---
 components/pages/Home.jsx     |  5 +++--
 components/pages/Profile.jsx  |  5 +++--
 components/pages/Settings.jsx |  6 ++++--
 pages/index.js                |  6 +++---
 styles/global.css             | 13 +++----------
 9 files changed, 41 insertions(+), 23 deletions(-)
 create mode 100644 components/App.jsx
 create mode 100644 components/Content.jsx

diff --git a/components/App.jsx b/components/App.jsx
new file mode 100644
index 0000000..eeede7f
--- /dev/null
+++ b/components/App.jsx
@@ -0,0 +1,7 @@
+const App = ({ children }) => (
+  <div className="flex h-screen flex-col">
+    {children}
+  </div>
+);
+
+export default App;
\ No newline at end of file
diff --git a/components/Content.jsx b/components/Content.jsx
new file mode 100644
index 0000000..d719c59
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/components/Nav.jsx b/components/Nav.jsx
index 6a2b0b1..1350dfc 100644
--- a/components/Nav.jsx
+++ b/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
diff --git a/components/TabBar.jsx b/components/TabBar.jsx
index 6d149b2..b25431a 100644
--- a/components/TabBar.jsx
+++ b/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;
\ No newline at end of file
diff --git a/components/pages/Home.jsx b/components/pages/Home.jsx
index 062d81e..db525e6 100644
--- a/components/pages/Home.jsx
+++ b/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>
   )
 }
 
diff --git a/components/pages/Profile.jsx b/components/pages/Profile.jsx
index 4d23e47..6778484 100644
--- a/components/pages/Profile.jsx
+++ b/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>
   )
 }
 
diff --git a/components/pages/Settings.jsx b/components/pages/Settings.jsx
index 4d77519..45a9d12 100644
--- a/components/pages/Settings.jsx
+++ b/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>
   )
 }
 
diff --git a/pages/index.js b/pages/index.js
index 5425eb1..52945cc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import Card from '../components/Card';
+import App from '../components/App';
 import Nav from '../components/Nav';
 import Home from '../components/pages/Home';
 import Profile from '../components/pages/Profile';
@@ -23,7 +23,7 @@ export default function Index() {
   const [page, setPage] = useState(pages[0]);
 
   return (
-    <>
+    <App>
       <Nav page={page} />
       <CurrentPage page={page} />
       <TabBar>
@@ -31,6 +31,6 @@ export default function Index() {
           <Tab key={p.id} {...p} onClick={() => setPage(p)} selected={p.id === page.id} />
         ))}
       </TabBar>
-    </>
+    </App>
   );
 }
diff --git a/styles/global.css b/styles/global.css
index a95813c..8d61cff 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,10 +1,3 @@
-:root {
-  /* Safe area contains how much space I should leave from the top and returns 0 if it's not supported */
-  --safe-area-inset-top: env(safe-area-inset-top);
-  /* A replacement for 100vh */
-  --screen-height: calc(100vh - var(--safe-area-inset-top));
-}
-
-#nav {
-  padding-top: var(--safe-area-inset-top);
-}
+body {
+  overflow: hidden;
+}
\ No newline at end of file