From 6c0fc558518b04b94b30839a043c270377847329 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Tue, 1 Aug 2023 22:34:12 +0200
Subject: [PATCH] Updated the Sidebar.jsx

---
 .../Dashboard/components/Sidebar/Sidebar.jsx  | 62 ++++++++++++-------
 1 file changed, 39 insertions(+), 23 deletions(-)

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}) => (
+        <ListItem key={path}>
+            <ListItemButton onClick={() => navigate(path.replace(":projectId", currentProject?.id))} selected={isSelected(path)}>
+                <ListItemIcon color="text.secondary">{icon}</ListItemIcon>
+                <ListItemText primary={name}/>
+            </ListItemButton>
+        </ListItem>
+    ));
+
+
     const drawer = (
         <>
             <Toolbar>
-                <Stack direction="row" alignItems="center" gap={1}>
+                <Stack direction="row" alignItems="center" gap={1.5}>
                     <img src={logo} alt="Logo" style={{width: "2rem"}}/>
                     <Typography variant="h5"><span style={{fontWeight: "bold"}}>License</span>API</Typography>
                 </Stack>
             </Toolbar>
 
-            <Divider />
-
             <List>
-                {sidebar.map((route) => (
-                    <ListItem key={route.path} disablePadding>
-                        <ListItemButton selected={isSelected(route.path)} onClick={() => navigate(route.path.replace("/*", ""))}>
-                            <ListItemIcon>{route.icon}</ListItemIcon>
-                            <ListItemText primary={route.name} />
-                        </ListItemButton>
-                    </ListItem>
-                ))}
-
-                <Divider />
-
+                <Box sx={{mb: 1}}>
+                    <Typography variant="p" sx={{ml: 1.5, mt: 2, mb: 2}} fontWeight={700} color="text.secondary">
+                        LicenseAPI</Typography>
+                    {getSidebar(sidebar)}
+                </Box>
+                {currentProject !== null && <Box sx={{mb: 1}}>
+                    <Typography variant="p" sx={{ml: 1.5, mt: 2, mb: 2}} fontWeight={700} color="text.secondary">
+                        Projektverwaltung</Typography>
+                    {getSidebar(projectSidebar)}
+                </Box>}
             </List>
         </>
     );
@@ -60,12 +72,16 @@ export const Sidebar = ({mobileOpen, toggleOpen, window: containerWindow}) => {
     return (
         <>
             <Drawer container={container} variant="temporary" open={mobileOpen} onClose={toggleOpen}
-                    ModalProps={{keepMounted: true}} sx={{display: { xs: 'block', sm: 'none' },
-                '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }}}>
+                    ModalProps={{keepMounted: true}} sx={{
+                display: {xs: 'block', sm: 'none'},
+                '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth}
+            }}>
                 {drawer}
             </Drawer>
-            <Drawer variant="permanent" sx={{display: { xs: 'none', sm: 'block' },
-                '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }}} open>
+            <Drawer variant="permanent" sx={{
+                display: {xs: 'none', sm: 'block'},
+                '& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth}
+            }} open>
                 {drawer}
             </Drawer>
         </>