header and footer

src/AppTheme.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+const theme = createTheme({
+  palette: {
+    // mode: "light", // or "dark"
+    mode: "dark", // or "dark"
+  },
+});
+
+export default function AppTheme({ children }: { children: React.ReactNode }) {
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}

src/Footer.tsx

@@ -2,6 +2,9 @@ import * as React from 'react';
 import Container from '@mui/material/Container';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
+import {AppBar, Box, Button, IconButton, Toolbar, Tooltip} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import LogoutIcon from "@mui/icons-material/Logout";
 
 function Copyright() {
   return (
@@ -17,6 +20,19 @@ function Copyright() {
 
 export default function Footer() {
   return (
+    <AppBar
+      position="fixed"
+      color="default"
+      sx={{
+        top: 'auto',
+        bottom: 0,
+        backdropFilter: 'blur(8px)',
+        boxShadow: 'none',
+        borderTop: '1px solid',
+        borderColor: 'divider',
+      }}
+    >
+      <Toolbar>
         <React.Fragment>
           <Container
             sx={{
@@ -31,5 +47,7 @@ export default function Footer() {
             <Copyright />
           </Container>
         </React.Fragment>
+      </Toolbar>
+    </AppBar>
   );
 }

src/Header.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Tooltip,
+  Button,
+  Box,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { useNavigate } from "react-router-dom";
+
+interface HeaderProps {
+  headerTitle: string;
+  isMobile: boolean;
+  onDrawerToggle: () => void;
+  onLogout: () => void;
+  username?: string;
+}
+
+export default function Header({
+  headerTitle,
+  isMobile,
+  onDrawerToggle,
+  onLogout,
+  username,
+}: HeaderProps) {
+  const navigate = useNavigate();
+
+  return (
+    <AppBar
+      position="fixed"
+      color="default"
+      sx={{
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+        backdropFilter: "blur(8px)",
+        boxShadow: "none",
+        borderBottom: "1px solid",
+        borderColor: "divider",
+      }}
+    >
+      <Toolbar>
+        {isMobile && (
+          <IconButton
+            color="inherit"
+            edge="start"
+            onClick={onDrawerToggle}
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+
+        <Typography
+          variant="h6"
+          noWrap
+          sx={{ flexGrow: 1, fontWeight: "bold" }}
+        >
+          {headerTitle}
+        </Typography>
+
+        <Box sx={{ display: { xs: "none", sm: "flex" }, alignItems: "center", mr: 2 }}>
+          <Button
+            color="inherit"
+            onClick={() => navigate("/admin/profile")}
+            sx={{ textTransform: "none", fontWeight: 500 }}
+          >
+            {username}
+          </Button>
+        </Box>
+
+        <Tooltip title="Logout">
+          <IconButton color="inherit" onClick={onLogout}>
+            <LogoutIcon />
+          </IconButton>
+        </Tooltip>
+      </Toolbar>
+    </AppBar>
+  );
+}

src/Home.tsx

@@ -1,20 +1,12 @@
 import * as React from "react";
-import AppTheme from './shared-theme/AppTheme';
-import CssBaseline from '@mui/material/CssBaseline';
 import { Box, Typography } from '@mui/material';
-import Footer from './Footer';
-
-export default function Home(props: { disableCustomTheme?: boolean }) {
 
+export default function Home() {
   return (
-    <AppTheme {...props}>
-      <CssBaseline enableColorScheme />
-      <Box>
+    <Box sx={{ p: 4 }}>
       <Typography variant="h1" gutterBottom>
         Welcome to Khata
       </Typography>
     </Box>
-      <Footer />
-    </AppTheme>
   );
 }

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}>
+      <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>
 );