Menu

components/AppShell.jsx

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

components/Link.jsx

@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Link as ReactRouterLink } from 'react-router-dom';
-
-const Link = ({ children, href, router, ...props }) => {
-  const [local, setLocal] = useState(false);
-
-  useEffect(() => {
-    setLocal(true);
-  }, []);
-
-  console.log('Rendering link', local, router);
-
-  if (!local || router === false) {
-    return children;
-  }
-  // return <a {...props}>{children}</a>;
-  return (
-    <ReactRouterLink to={href} {...props}>
-      {children}
-    </ReactRouterLink>
-  );
-};
-
-export default Link;

components/Menu.jsx

@@ -0,0 +1,30 @@
+import { Plugins } from '@capacitor/core';
+import { IonContent, IonHeader, IonMenu, IonTitle, IonToolbar } from '@ionic/react';
+
+const Menu = () => {
+  const { StatusBar } = Plugins;
+
+  const handleOpen = () => {
+    StatusBar.setStyle({
+      style: StatusBarStyle.Light,
+    });
+  };
+  const handleClose = () => {
+    StatusBar.setStyle({
+      style: StatusBarStyle.Dark,
+    });
+  };
+
+  return (
+    <IonMenu side="start" contentId="main" onIonDidOpen={handleOpen} onIonDidClose={handleClose}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent></IonContent>
+    </IonMenu>
+  );
+};
+
+export default Menu;

components/MenuContent.jsx

@@ -1,39 +0,0 @@
-import useLocation from '../hooks/useLocation';
-import Store from '../store';
-import * as actions from '../store/actions';
-import * as selectors from '../store/selectors';
-
-const MenuItem = ({ children, ...props }) => (
-  <li {...props}>
-    <a
-      href="#"
-      className="text-gray-800 hover:text-gray-400 dark:text-gray-400 block px-4 py-2 rounded-md text-base font-medium"
-    >
-      {children}
-    </a>
-  </li>
-);
-
-const MenuContent = () => {
-  const [location, setLocation] = useLocation();
-
-  const go = page => {
-    actions.setMenuOpen(false);
-    setLocation(page);
-  };
-
-  return (
-    <>
-      <div className="p-4">
-        <h2 className="text-xl select-none dark:text-gray-500">Menu</h2>
-      </div>
-      <ul>
-        <MenuItem onClick={() => go('/')}>Home</MenuItem>
-        <MenuItem onClick={() => go('/lists')}>Lists</MenuItem>
-        <MenuItem onClick={() => go('/settings')}>Settings</MenuItem>
-      </ul>
-    </>
-  );
-};
-
-export default MenuContent;

components/pages/ListDetail.jsx

@@ -11,7 +11,6 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
-import Link from '../../components/Link';
 
 import Store from '../../store';
 import * as actions from '../../store/actions';