diff --git a/src/states/Dashboard/components/Sidebar/Sidebar.jsx b/src/states/Dashboard/components/Sidebar/Sidebar.jsx
index 2730088..e11d5ef 100644
--- a/src/states/Dashboard/components/Sidebar/Sidebar.jsx
+++ b/src/states/Dashboard/components/Sidebar/Sidebar.jsx
@@ -1,5 +1,5 @@
import {
- Divider,
+ Box,
Drawer,
List,
ListItem,
@@ -7,19 +7,24 @@ import {
ListItemIcon,
ListItemText,
Stack,
- Toolbar, Typography, useTheme
+ Toolbar,
+ Typography,
+ useTheme
} from "@mui/material";
import {useLocation, useNavigate} from "react-router-dom";
-import {sidebar} from "@/common/routes";
+import {projectSidebar, sidebar} from "@/common/routes";
import DarkLogo from "@/common/assets/images/logo/small-dark.webp";
import LightLogo from "@/common/assets/images/logo/small-light.webp";
+import {useContext} from "react";
+import {ProjectContext} from "@/states/Dashboard/contexts/Project/index.js";
-const drawerWidth = 240;
+const drawerWidth = 260;
export const Sidebar = ({mobileOpen, toggleOpen, window: containerWindow}) => {
const location = useLocation();
const navigate = useNavigate();
const theme = useTheme();
+ const {currentProject} = useContext(ProjectContext);
const logo = theme.palette.mode === "dark" ? DarkLogo : LightLogo;
const container = containerWindow !== undefined ? () => containerWindow().document.body : undefined;
@@ -27,32 +32,39 @@ export const Sidebar = ({mobileOpen, toggleOpen, window: containerWindow}) => {
const isSelected = (path) => {
if (path === "/") return location.pathname === "/";
- return location.pathname.startsWith(path);
+ return location.pathname.replace(currentProject?.id, ":projectId").startsWith(path);
}
+ const getSidebar = (sidebar) => sidebar.map(({name, icon, path}) => (
+
+ navigate(path.replace(":projectId", currentProject?.id))} selected={isSelected(path)}>
+ {icon}
+
+
+
+ ));
+
+
const drawer = (
<>
-
+
LicenseAPI
-
-
- {sidebar.map((route) => (
-
- navigate(route.path.replace("/*", ""))}>
- {route.icon}
-
-
-
- ))}
-
-
-
+
+
+ LicenseAPI
+ {getSidebar(sidebar)}
+
+ {currentProject !== null &&
+
+ Projektverwaltung
+ {getSidebar(projectSidebar)}
+ }
>
);
@@ -60,12 +72,16 @@ export const Sidebar = ({mobileOpen, toggleOpen, window: containerWindow}) => {
return (
<>
+ ModalProps={{keepMounted: true}} sx={{
+ display: {xs: 'block', sm: 'none'},
+ '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth}
+ }}>
{drawer}
-
+
{drawer}
>