diff --git a/components/AppShell.jsx b/components/AppShell.jsx index 82eee0f..ee8f3d9 100644 --- a/components/AppShell.jsx +++ b/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 ( - - - } /> - } /> - + + + + } /> + } /> + + ); diff --git a/components/Menu.jsx b/components/Menu.jsx index 663289b..04f4f7e 100644 --- a/components/Menu.jsx +++ b/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 = () => { Menu - + + + {pages.map(p => ( + + + + {p.title} + + + ))} + + ); }; diff --git a/components/pages/Lists.jsx b/components/pages/Lists.jsx index 566211b..b7bdd43 100644 --- a/components/pages/Lists.jsx +++ b/components/pages/Lists.jsx @@ -22,8 +22,8 @@ const AllLists = ({ onSelect }) => { return ( <> - {lists.map(list => ( - + {lists.map((list, i) => ( + ))} );