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>
-        <Menu />
-        <IonRouterOutlet id="main">
-          <Route path="/tabs" render={() => <Tabs />} />
-          <Route exact path="/" render={() => <Redirect to="/tabs" />} />
-        </IonRouterOutlet>
+        <IonSplitPane contentId="main">
+          <Menu />
+          <IonRouterOutlet id="main">
+            <Route path="/tabs" render={() => <Tabs />} />
+            <Route exact path="/" render={() => <Redirect to="/tabs" />} />
+          </IonRouterOutlet>
+        </IonSplitPane>
       </IonReactRouter>
     </IonApp>
   );