From bb75ec72082db0f0825d050da0521e1a94a5cf08 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Wed, 20 Jan 2021 11:41:53 -0600
Subject: [PATCH] Working on menu

---
 components/Menu.jsx                | 29 ++++++++++++++++++++---------
 components/pages/Notifications.jsx |  4 ++--
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/components/Menu.jsx b/components/Menu.jsx
index 355b302..663289b 100644
--- a/components/Menu.jsx
+++ b/components/Menu.jsx
@@ -1,20 +1,31 @@
-import { Plugins } from '@capacitor/core';
+import { Plugins, StatusBarStyle } from '@capacitor/core';
 import { IonContent, IonHeader, IonMenu, IonTitle, IonToolbar } from '@ionic/react';
+import { useEffect, useState } from 'react';
 
 const Menu = () => {
   const { StatusBar } = Plugins;
 
-  const handleOpen = () => {
-    StatusBar.setStyle({
-      style: StatusBarStyle.Light,
-    });
+  const [isDark, setIsDark] = useState(false);
+
+  const handleOpen = async () => {
+    try {
+      await StatusBar.setStyle({
+        style: isDark ? StatusBarStyle.Light : StatusBarStyle.Dark,
+      });
+    } catch {}
   };
-  const handleClose = () => {
-    StatusBar.setStyle({
-      style: StatusBarStyle.Dark,
-    });
+  const handleClose = async () => {
+    try {
+      await StatusBar.setStyle({
+        style: isDark ? StatusBarStyle.Dark : StatusBarStyle.Light,
+      });
+    } catch {}
   };
 
+  useEffect(() => {
+    setIsDark(window.matchMedia('(prefers-color-scheme: dark)').matches);
+  }, []);
+
   return (
     <IonMenu side="start" contentId="main" onIonDidOpen={handleOpen} onIonDidClose={handleClose}>
       <IonHeader>
diff --git a/components/pages/Notifications.jsx b/components/pages/Notifications.jsx
index 6e49adb..6c6b81e 100644
--- a/components/pages/Notifications.jsx
+++ b/components/pages/Notifications.jsx
@@ -43,8 +43,8 @@ const Notifications = ({ open, onDidDismiss }) => {
           </IonToolbar>
         </IonHeader>
         <IonList>
-          {notifications.map(notification => (
-            <NotificationItem notification={notification} />
+          {notifications.map((notification, i) => (
+            <NotificationItem notification={notification} key={i} />
           ))}
         </IonList>
       </IonContent>