header fixes

src/Header.tsx

@@ -1,4 +1,8 @@
 import * as React from "react";
+import {
+  useLocation,
+  matchPath
+} from "react-router-dom";
 import {
   AppBar,
   Toolbar,
@@ -16,14 +20,23 @@ import { useNavigate } from "react-router-dom";
 import { useAuth } from "../react-auth";
 
 interface HeaderProps {
+  routerMapping: {
+    path: string;
     headerTitle: string;
-  onDrawerToggle?: () => void; // optional (only used where needed)
+  }[];
+  onDrawerToggle?: () => void;
 }
 
 export default function Header({
-  headerTitle,
+  routerMapping,
   onDrawerToggle,
 }: HeaderProps) {
+  const location = useLocation();
+  const matchedRoute = routerMapping.find((route) =>
+    matchPath({ path: route.path, end: false }, location.pathname)
+  );
+  const headerTitle = matchedRoute?.headerTitle ?? "Khata";
+
   const navigate = useNavigate();
   const { currentUser, logout } = useAuth();
 

src/main.jsx

@@ -27,21 +27,38 @@ const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
 const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
 
+const routerMapping = [
+  { path: "/", component: Home, headerTitle: "Home" },
+  { path: "/home", component: Home, headerTitle: "Home" },
+  { path: "/admin/*", component: Admin, headerTitle: "Admin" },
+];
+
 root.render(
   <BrowserRouter>
     <AuthProvider authBaseUrl={AUTH_BASE}>
       <AppTheme>
         <CssBaseline enableColorScheme />
-        <Header />
+        <Header routerMapping={routerMapping} />
 
         <Box sx={{ pb: 8 }}>
           <Toolbar />
 
           <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/home" element={<Home />} />
-            <Route path="/admin/*" element={<Admin basePath="/admin" />} />
+            {routerMapping.map(({ path, component: Component }) => (
+              <Route
+                key={path}
+                path={path}
+                element={
+                  path.startsWith("/admin") ? (
+                    <Component basePath="/admin" />
+                  ) : (
+                    <Component />
+                  )
+                }
+              />
+            ))}
           </Routes>
+
         </Box>
 
         <Footer />