Upgrading to Capacitor 3

components/Menu.jsx

@@ -1,4 +1,4 @@
-import { Plugins, StatusBarStyle } from '@capacitor/core';
+import { StatusBar, Style } from '@capacitor/status-bar';
 import {
   IonContent,
   IonHeader,
@@ -8,13 +8,11 @@ import {
   IonList,
   IonMenu,
   IonMenuToggle,
-  IonRouterContext,
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { cog, flash, list } from 'ionicons/icons';
-import { useHistory, useLocation } from 'react-router-dom';
 
 const pages = [
   {
@@ -35,24 +33,19 @@ const pages = [
 ];
 
 const Menu = () => {
-  const { StatusBar } = Plugins;
-
-  const ionRouterContext = useContext(IonRouterContext);
-  const location = useLocation();
-
   const [isDark, setIsDark] = useState(false);
 
   const handleOpen = async () => {
     try {
       await StatusBar.setStyle({
-        style: isDark ? StatusBarStyle.Light : StatusBarStyle.Dark,
+        style: isDark ? Style.Dark : Style.Light,
       });
     } catch {}
   };
   const handleClose = async () => {
     try {
       await StatusBar.setStyle({
-        style: isDark ? StatusBarStyle.Dark : StatusBarStyle.Light,
+        style: isDark ? Style.Dark : Style.Light,
       });
     } catch {}
   };
@@ -70,7 +63,7 @@ const Menu = () => {
       </IonHeader>
       <IonContent>
         <IonList>
-          {pages.map(p => (
+          {pages.map((p, k) => (
             <IonMenuToggle autoHide={false}>
               <IonItem routerLink={p.url} routerDirection="none" detail={false} lines="none">
                 <IonIcon icon={p.icon} slot="start" />