From 737fdf717cc1338cfaf2bcc78f320c1abd70e67a Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Tue, 19 Jan 2021 23:10:17 -0600
Subject: [PATCH] Menu

---
 components/AppShell.jsx         | 21 ++++--------------
 components/Link.jsx             | 24 --------------------
 components/Menu.jsx             | 30 +++++++++++++++++++++++++
 components/MenuContent.jsx      | 39 ---------------------------------
 components/pages/ListDetail.jsx |  1 -
 5 files changed, 34 insertions(+), 81 deletions(-)
 delete mode 100644 components/Link.jsx
 create mode 100644 components/Menu.jsx
 delete mode 100644 components/MenuContent.jsx

diff --git a/components/AppShell.jsx b/components/AppShell.jsx
index 4442e53..82eee0f 100644
--- a/components/AppShell.jsx
+++ b/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" />} />
diff --git a/components/Link.jsx b/components/Link.jsx
deleted file mode 100644
index 75aa137..0000000
--- a/components/Link.jsx
+++ /dev/null
@@ -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;
diff --git a/components/Menu.jsx b/components/Menu.jsx
new file mode 100644
index 0000000..355b302
--- /dev/null
+++ b/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;
diff --git a/components/MenuContent.jsx b/components/MenuContent.jsx
deleted file mode 100644
index 8514844..0000000
--- a/components/MenuContent.jsx
+++ /dev/null
@@ -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;
diff --git a/components/pages/ListDetail.jsx b/components/pages/ListDetail.jsx
index e45746b..4cd400a 100644
--- a/components/pages/ListDetail.jsx
+++ b/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';