Menu

components/AppShell.jsx

@@ -1,4 +1,12 @@
-import { IonApp, IonRouterOutlet } from '@ionic/react';
+import {
+  IonApp,
+  IonContent,
+  IonHeader,
+  IonMenu,
+  IonRouterOutlet,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import { Redirect, Route } from 'react-router-dom';
 
@@ -8,7 +16,15 @@ const AppShell = ({ page, pageProps }) => {
   return (
     <IonApp>
       <IonReactRouter>
-        <IonRouterOutlet>
+        <IonMenu side="start" contentId="main">
+          <IonHeader>
+            <IonToolbar>
+              <IonTitle>Menu</IonTitle>
+            </IonToolbar>
+          </IonHeader>
+          <IonContent></IonContent>
+        </IonMenu>
+        <IonRouterOutlet id="main">
           <Route path="/tabs" render={() => <Tabs />} />
           <Route exact path="/" render={() => <Redirect to="/tabs" />} />
         </IonRouterOutlet>

components/pages/Feed.jsx

@@ -9,6 +9,7 @@ import {
   IonButton,
   IonIcon,
   IonContent,
+  IonMenuButton,
 } from '@ionic/react';
 import Notifications from './Notifications';
 import { useState } from 'react';
@@ -42,6 +43,9 @@ const Feed = () => {
       <IonHeader>
         <IonToolbar>
           <IonTitle>Feed</IonTitle>
+          <IonButtons slot="start">
+            <IonMenuButton />
+          </IonButtons>
           <IonButtons slot="end">
             <IonButton onClick={() => setShowNotifications(true)}>
               <IonIcon icon={notificationsOutline} />