Menu

components/AppShell.jsx

@@ -1,4 +1,4 @@
-import { IonApp, IonRouterOutlet } from '@ionic/react';
+import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
 
 import { IonReactRouter } from '@ionic/react-router';
 import { Redirect, Route } from 'react-router-dom';
@@ -6,15 +6,17 @@ import Menu from './Menu';
 
 import Tabs from './pages/Tabs';
 
-const AppShell = ({ page, pageProps }) => {
+const AppShell = () => {
   return (
     <IonApp>
       <IonReactRouter>
+        <IonSplitPane contentId="main">
           <Menu />
           <IonRouterOutlet id="main">
             <Route path="/tabs" render={() => <Tabs />} />
             <Route exact path="/" render={() => <Redirect to="/tabs" />} />
           </IonRouterOutlet>
+        </IonSplitPane>
       </IonReactRouter>
     </IonApp>
   );

components/Menu.jsx

@@ -1,10 +1,45 @@
 import { Plugins, StatusBarStyle } from '@capacitor/core';
-import { IonContent, IonHeader, IonMenu, IonTitle, IonToolbar } from '@ionic/react';
-import { useEffect, useState } from 'react';
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonMenu,
+  IonMenuToggle,
+  IonRouterContext,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { useContext, useEffect, useState } from 'react';
+import { cog, flash, list } from 'ionicons/icons';
+import { useHistory, useLocation } from 'react-router-dom';
+
+const pages = [
+  {
+    title: 'Feed',
+    icon: flash,
+    url: '/tabs/feed',
+  },
+  {
+    title: 'Lists',
+    icon: list,
+    url: '/tabs/lists',
+  },
+  {
+    title: 'Settings',
+    icon: cog,
+    url: '/tabs/settings',
+  },
+];
 
 const Menu = () => {
   const { StatusBar } = Plugins;
 
+  const ionRouterContext = useContext(IonRouterContext);
+  const location = useLocation();
+
   const [isDark, setIsDark] = useState(false);
 
   const handleOpen = async () => {
@@ -33,7 +68,18 @@ const Menu = () => {
           <IonTitle>Menu</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent></IonContent>
+      <IonContent>
+        <IonList>
+          {pages.map(p => (
+            <IonMenuToggle autoHide={false}>
+              <IonItem routerLink={p.url} routerDirection="none" detail={false} lines="none">
+                <IonIcon icon={p.icon} slot="start" />
+                <IonLabel>{p.title}</IonLabel>
+              </IonItem>
+            </IonMenuToggle>
+          ))}
+        </IonList>
+      </IonContent>
     </IonMenu>
   );
 };

components/pages/Lists.jsx

@@ -22,8 +22,8 @@ const AllLists = ({ onSelect }) => {
 
   return (
     <>
-      {lists.map(list => (
-        <ListEntry list={list} />
+      {lists.map((list, i) => (
+        <ListEntry list={list} key={i} />
       ))}
     </>
   );