handle the active theme and use MenuItem for the tree

src/components/navbar.tsx

@@ -1,17 +1,21 @@
 import { Menubar } from 'primereact/menubar';
+import { MenuItem } from 'primereact/menuitem';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AuthContext } from '../contexts';
+import { AuthContext, ThemeContext } from '../contexts';
 import { Configuration } from '../services';
 import { Airport } from '../services';
 import { AirportOverview, BackendReturnStatus, IAuthState } from '../types';
 
 export const NavBar: React.FC = () => {
   const [menuTree, setMenuTree] = useState<any>(undefined);
+  const themeContext = useContext(ThemeContext);
   const authContext = useContext(AuthContext);
   const currentAuth = useRef<IAuthState>();
+  const currentTheme = useRef<boolean>();
   const navigate = useNavigate();
 
+  currentTheme.current = themeContext.darkMode;
   currentAuth.current = authContext.auth;
 
   const firBasedSubMenu = (airports: AirportOverview[], endpoint: string): any[] => {
@@ -63,10 +67,10 @@ export const NavBar: React.FC = () => {
     Airport.all().then((response) => {
       if (response.status !== BackendReturnStatus.Ok) return [];
 
-      const newMenuTree: { label: string; items?: any[]; command?: () => void }[] = [
+      const newMenuTree: MenuItem[] = [
         {
           label: 'Airports',
-          items: [] as any[],
+          items: [],
         }
       ];
 
@@ -103,6 +107,14 @@ export const NavBar: React.FC = () => {
         });
       }
 
+      newMenuTree.push({
+        label: currentTheme.current ? 'Light mode' : 'Dark mode',
+        command: () => {
+          themeContext.setDarkMode(!currentTheme.current);
+          updateMenuItems();
+        },
+      });
+
       newMenuTree.push({
         label: 'Logout',
         command: () => navigate('/logout'),
@@ -135,5 +147,9 @@ export const NavBar: React.FC = () => {
 
   if (menuTree === undefined || !currentAuth.current.valid) return <></>;
 
-  return (menuTree.length !== 0 ? <Menubar model={menuTree} /> : <></>);
+  return (
+    menuTree.length !== 0 ?
+      <Menubar model={menuTree} />
+    : <></>
+  );
 };