LicenseAPI/Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the Sidebar.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-08-01 22:34:12 +02:00
parent 1f41e899c7
commit 6c0fc55851
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/states/Dashboard/components/Sidebar/Sidebar.jsx
View File

@ -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>
</>