Tab switcher

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

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"

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

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

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

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

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() {

styles/global.css

@@ -1,3 +1,10 @@
 body {
   overflow: hidden;
+  height: 100vh;
+  width: 100vw;
+}
+
+#__next {
+  height: 100vh;
+  width: 100vw;
 }