Updated the Header.jsx

src/states/Dashboard/components/Header/Header.jsx

@@ -1,17 +1,36 @@
 import {AppBar, IconButton, Toolbar, Typography} from "@mui/material";
 import {Menu} from "@mui/icons-material";
+import {useContext, useEffect} from "react";
+import {projectSidebar, sidebar} from "@/common/routes/index.jsx";
+import {useLocation} from "react-router-dom";
+import {ProjectContext} from "@/states/Dashboard/contexts/Project";
 
-const drawerWidth = 240;
+const drawerWidth = 260;
+
+export const Header = ({toggleOpen}) => {
+    const location = useLocation();
+    const {currentProject} = useContext(ProjectContext);
+
+    useEffect(() => {
+        document.title = "LicenseAPI - " + getTitleByPath();
+    }, [location]);
+
+    const getTitleByPath = () => {
+        const route = [...sidebar, ...projectSidebar].find((route) => location.pathname
+            .replace(currentProject?.id, ":projectId").startsWith(route.path) && route.path !== "/");
+        if (route) return route.name;
+        return "Startseite";
+    }
 
-export const Header = () => {
     return (
-        <AppBar position="fixed" sx={{width: { sm: `calc(100% - ${drawerWidth}px)` }, ml: { sm: `${drawerWidth}px` }}}>
+        <AppBar position="fixed" sx={{width: { sm: `calc(100% - ${drawerWidth}px)` }, ml: { sm: `${drawerWidth}px` }}}
+                color="inherit">
             <Toolbar>
-                <IconButton color="inherit" aria-label="open drawer" edge="start" onClick={() => {}}
+                <IconButton color="inherit" aria-label="open drawer" edge="start" onClick={toggleOpen}
                             sx={{ mr: 2, display: { sm: 'none' } }}>
                     <Menu />
                 </IconButton>
-                <Typography variant="h6" noWrap>Home</Typography>
+                <Typography variant="h6" fontWeight={700}>{getTitleByPath()}</Typography>
             </Toolbar>
         </AppBar>
     )