Menu

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