From e8324428bfe2e15fe2a2eb0b3d83dc19a97acd46 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Sun, 20 Dec 2020 23:45:08 -0600
Subject: [PATCH] Tab switcher

---
 components/Content.jsx        | 13 +++++++------
 components/Nav.jsx            | 19 ++++++++++++++++---
 components/TabBar.jsx         |  2 +-
 components/pages/Home.jsx     |  4 ++--
 components/pages/Profile.jsx  |  4 ++--
 components/pages/Settings.jsx |  4 ++--
 pages/index.js                | 10 ++++++++--
 styles/global.css             |  9 ++++++++-
 8 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/components/Content.jsx b/components/Content.jsx
index d719c59..d88f534 100644
--- a/components/Content.jsx
+++ b/components/Content.jsx
@@ -1,9 +1,10 @@
-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
-  }}>
+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
+  })}>
     {children}
   </div>
 );
diff --git a/components/Nav.jsx b/components/Nav.jsx
index 1350dfc..cc89164 100644
--- a/components/Nav.jsx
+++ b/components/Nav.jsx
@@ -1,13 +1,26 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+import { Plugins } from '@capacitor/core';
 
 const Nav = ({ page }) => {
   const [showMenu, setShowMenu] = useState(false);
 
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
+  useEffect(() => {
+    Plugins.StatusBar.setStyle({
+      style: 'DARK'
+    });
+  }, []);
+
   return (
-    <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">
+    <nav
+      className="bg-gray-800 w-full flex-0 flex items-end flex-row"
+      style={{
+        height: `calc(env(safe-area-inset-bottom, 0px) + 64px)`
+      }}
+    >
+      <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 flex-1">
         <div className="relative flex items-center justify-between h-16">
           <div
             className="absolute inset-y-0 left-0 flex items-center sm:hidden"
diff --git a/components/TabBar.jsx b/components/TabBar.jsx
index b25431a..667f04f 100644
--- a/components/TabBar.jsx
+++ b/components/TabBar.jsx
@@ -1,7 +1,7 @@
 const TabBar = ({ children }) => (
   <nav
     id="tab-bar"
-    className="py-2 h-16 bg-white bottom-0 w-full flex justify-center items-start bg-gray-50"
+    className="py-2 h-16 bg-white w-full flex justify-center items-start bg-gray-50"
     style={{
       height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`
     }}>
diff --git a/components/pages/Home.jsx b/components/pages/Home.jsx
index db525e6..6cae91b 100644
--- a/components/pages/Home.jsx
+++ b/components/pages/Home.jsx
@@ -2,9 +2,9 @@ import { homeItems } from "../../data";
 import PostCard from "../Card";
 import Content from "../Content";
 
-const Home = () => {
+const Home = ({ selected }) => {
   return (
-    <Content>
+    <Content visible={selected}>
       {homeItems.map(i => (
         <PostCard {...i} />
       ))}
diff --git a/components/pages/Profile.jsx b/components/pages/Profile.jsx
index 6778484..fc75967 100644
--- a/components/pages/Profile.jsx
+++ b/components/pages/Profile.jsx
@@ -1,9 +1,9 @@
 import { homeItems } from "../../data";
 import Content from "../Content";
 
-const Profile = () => {
+const Profile = ({ selected }) => {
   return (
-    <Content>
+    <Content visible={selected}>
       <h2>Profile</h2>
     </Content>
   )
diff --git a/components/pages/Settings.jsx b/components/pages/Settings.jsx
index 45a9d12..3ff94ec 100644
--- a/components/pages/Settings.jsx
+++ b/components/pages/Settings.jsx
@@ -1,8 +1,8 @@
 import Content from "../Content";
 
-const Settings = () => {
+const Settings = ({ selected }) => {
   return (
-    <Content className="p-4">
+    <Content visible={selected}>
       <h2>Settings</h2>
     </Content>
   )
diff --git a/pages/index.js b/pages/index.js
index 52945cc..dc9bb94 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -15,8 +15,14 @@ const pages = [
 ]
 
 const CurrentPage = ({ page }) => {
-  const Page = page.component;
-  return <Page />;
+  return (
+    <div className="flex-1 overflow-hidden relative">
+      {pages.map(p => {
+        const Page = p.component;
+        return <Page selected={page.id === p.id} />
+      })}
+    </div>
+  )
 }
 
 export default function Index() {
diff --git a/styles/global.css b/styles/global.css
index 8d61cff..70805ef 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,3 +1,10 @@
 body {
   overflow: hidden;
-}
\ No newline at end of file
+  height: 100vh;
+  width: 100vw;
+}
+
+#__next {
+  height: 100vh;
+  width: 100vw;
+}