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 {
-  headerTitle: string;
-  onDrawerToggle?: () => void; // optional (only used where needed)
+  routerMapping: {
+    path: string;
+    headerTitle: string;
+  }[];
+  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();