Working on nav

Author: mlynch

components/AppShell.jsx

@@ -9,6 +9,7 @@ import Feed from './pages/Feed';
 import Lists from './pages/Lists';
 import ListDetail from './pages/ListDetail';
 import Settings from './pages/Settings';
+import Tabs from './pages/Tabs';
 
 setupIonicReact({});
 
@@ -24,37 +25,10 @@ const AppShell = () => {
   return (
     <IonApp>
       <IonReactRouter>
-        <IonTabs>
-          <IonRouterOutlet>
-            <Route path="/tabs/feed" exact={true}>
-              <Feed />
-            </Route>
-            <Route path="/tabs/lists" exact={true}>
-              <Lists />
-            </Route>
-            <Route path="/tabs/lists/:listId" exact={true}>
-              <ListDetail />
-            </Route>
-            <Route path="/tabs/settings" exact={true}>
-              <Settings />
-            </Route>
-            <Route path="/" render={() => <Redirect to="/tabs/feed" />} exact={true} />
-          </IonRouterOutlet>
-          <IonTabBar slot="bottom">
-            <IonTabButton tab="tab1" href="/tabs/feed">
-              <IonIcon icon={flash} />
-              <IonLabel>Feed</IonLabel>
-            </IonTabButton>
-            <IonTabButton tab="tab2" href="/tabs/lists">
-              <IonIcon icon={list} />
-              <IonLabel>Lists</IonLabel>
-            </IonTabButton>
-            <IonTabButton tab="tab3" href="/tabs/settings">
-              <IonIcon icon={cog} />
-              <IonLabel>Settings</IonLabel>
-            </IonTabButton>
-          </IonTabBar>
-        </IonTabs>
+        <IonRouterOutlet id="main">
+          <Route path="/tabs" render={() => <Tabs />} />
+          <Route path="/" render={() => <Redirect to="/tabs/feed" />} exact={true} />
+        </IonRouterOutlet>
       </IonReactRouter>
     </IonApp>
   );

components/pages/ListDetail.jsx

@@ -42,20 +42,15 @@ const ListDetail = ({ match }) => {
 
   return (
     <IonPage>
-      <IonHeader translucent>
+      <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
             <IonBackButton defaultHref="/tabs/lists" />
           </IonButtons>
           <IonTitle>{loadedList.name}</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent fullscreen>
-        <IonHeader collapse="condense">
-          <IonToolbar>
-            <IonTitle size="large">{loadedList.name}</IonTitle>
-          </IonToolbar>
-        </IonHeader>
+      <IonContent>
         <ListItems list={loadedList} />
       </IonContent>
     </IonPage>

components/pages/Lists.jsx

@@ -33,12 +33,12 @@ const AllLists = ({ onSelect }) => {
 const Lists = () => {
   return (
     <IonPage>
-      <IonHeader>
+      <IonHeader translucent={true}>
         <IonToolbar>
           <IonTitle>Lists</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent fullscreen>
+      <IonContent fullscreen={true}>
         <IonHeader collapse="condense">
           <IonToolbar>
             <IonTitle size="large">Lists</IonTitle>

components/pages/Tabs.jsx

@@ -0,0 +1,39 @@
+import { Redirect, Route } from 'react-router-dom';
+import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
+import { IonReactRouter } from '@ionic/react-router';
+import { cog, flash, list } from 'ionicons/icons';
+
+import Home from './Feed';
+import Lists from './Lists';
+import ListDetail from './ListDetail';
+import Settings from './Settings';
+
+const Tabs = () => {
+  return (
+    <IonTabs>
+      <IonRouterOutlet>
+        <Route path="/tabs/feed" render={() => <Home />} exact={true} />
+        <Route path="/tabs/lists" render={() => <Lists />} exact={true} />
+        <Route path="/tabs/lists/:listId" render={() => <ListDetail />} exact={true} />
+        <Route path="/tabs/settings" render={() => <Settings />} exact={true} />
+        <Route path="/tabs" render={() => <Redirect to="/tabs/feed" />} exact={true} />
+      </IonRouterOutlet>
+      <IonTabBar slot="bottom">
+        <IonTabButton tab="tab1" href="/tabs/feed">
+          <IonIcon icon={flash} />
+          <IonLabel>Feed</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab2" href="/tabs/lists">
+          <IonIcon icon={list} />
+          <IonLabel>Lists</IonLabel>
+        </IonTabButton>
+        <IonTabButton tab="tab3" href="/tabs/settings">
+          <IonIcon icon={cog} />
+          <IonLabel>Settings</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  );
+};
+
+export default Tabs;