header and footer

src/main.jsx

@@ -1,11 +1,23 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import {
+  BrowserRouter,
+  Routes,
+  Route
+} from "react-router-dom";
+import {
+  Box,
+  CssBaseline,
+  Toolbar
+} from "@mui/material";
 import Home from './Home';
 import Admin from '../react-openapi/Admin';
 import { Buffer } from 'buffer';
 import process from 'process';
 import { AuthProvider } from "../react-auth";
+import Header from './Header';
+import Footer from './Footer';
+import AppTheme from './AppTheme';
 
 // Polyfill Node.js globals for browser environment (needed by SwaggerParser)
 window.Buffer = Buffer;
@@ -18,11 +30,22 @@ const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
 root.render(
   <BrowserRouter>
     <AuthProvider authBaseUrl={AUTH_BASE}>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/home" element={<Home />} />
-        <Route path="/admin/*" element={<Admin basePath="/admin" />} />
-      </Routes>
+      <AppTheme>
+        <CssBaseline enableColorScheme />
+        <Header />
+
+        <Box sx={{ pb: 8 }}>
+          <Toolbar />
+
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/home" element={<Home />} />
+            <Route path="/admin/*" element={<Admin basePath="/admin" />} />
+          </Routes>
+        </Box>
+
+        <Footer />
+      </AppTheme>
     </AuthProvider>
   </BrowserRouter>
 );