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 { import {
Divider, Box,
Drawer, Drawer,
List, List,
ListItem, ListItem,
@ -7,19 +7,24 @@ import {
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
Stack, Stack,
Toolbar, Typography, useTheme Toolbar,
Typography,
useTheme
} from "@mui/material"; } from "@mui/material";
import {useLocation, useNavigate} from "react-router-dom"; 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 DarkLogo from "@/common/assets/images/logo/small-dark.webp";
import LightLogo from "@/common/assets/images/logo/small-light.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}) => { export const Sidebar = ({mobileOpen, toggleOpen, window: containerWindow}) => {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme(); const theme = useTheme();
const {currentProject} = useContext(ProjectContext);
const logo = theme.palette.mode === "dark" ? DarkLogo : LightLogo; const logo = theme.palette.mode === "dark" ? DarkLogo : LightLogo;
const container = containerWindow !== undefined ? () => containerWindow().document.body : undefined; const container = containerWindow !== undefined ? () => containerWindow().document.body : undefined;
@ -27,32 +32,39 @@ export const Sidebar = ({mobileOpen, toggleOpen, window: containerWindow}) => {
const isSelected = (path) => { const isSelected = (path) => {
if (path === "/") return location.pathname === "/"; 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 = ( const drawer = (
<> <>
<Toolbar> <Toolbar>
<Stack direction="row" alignItems="center" gap={1}> <Stack direction="row" alignItems="center" gap={1.5}>
<img src={logo} alt="Logo" style={{width: "2rem"}}/> <img src={logo} alt="Logo" style={{width: "2rem"}}/>
<Typography variant="h5"><span style={{fontWeight: "bold"}}>License</span>API</Typography> <Typography variant="h5"><span style={{fontWeight: "bold"}}>License</span>API</Typography>
</Stack> </Stack>
</Toolbar> </Toolbar>
<Divider />
<List> <List>
{sidebar.map((route) => ( <Box sx={{mb: 1}}>
<ListItem key={route.path} disablePadding> <Typography variant="p" sx={{ml: 1.5, mt: 2, mb: 2}} fontWeight={700} color="text.secondary">
<ListItemButton selected={isSelected(route.path)} onClick={() => navigate(route.path.replace("/*", ""))}> LicenseAPI</Typography>
<ListItemIcon>{route.icon}</ListItemIcon> {getSidebar(sidebar)}
<ListItemText primary={route.name} /> </Box>
</ListItemButton> {currentProject !== null && <Box sx={{mb: 1}}>
</ListItem> <Typography variant="p" sx={{ml: 1.5, mt: 2, mb: 2}} fontWeight={700} color="text.secondary">
))} Projektverwaltung</Typography>
{getSidebar(projectSidebar)}
<Divider /> </Box>}
</List> </List>
</> </>
); );
@ -60,12 +72,16 @@ export const Sidebar = ({mobileOpen, toggleOpen, window: containerWindow}) => {
return ( return (
<> <>
<Drawer container={container} variant="temporary" open={mobileOpen} onClose={toggleOpen} <Drawer container={container} variant="temporary" open={mobileOpen} onClose={toggleOpen}
ModalProps={{keepMounted: true}} sx={{display: { xs: 'block', sm: 'none' }, ModalProps={{keepMounted: true}} sx={{
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }}}> display: {xs: 'block', sm: 'none'},
'& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth}
}}>
{drawer} {drawer}
</Drawer> </Drawer>
<Drawer variant="permanent" sx={{display: { xs: 'none', sm: 'block' }, <Drawer variant="permanent" sx={{
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }}} open> display: {xs: 'none', sm: 'block'},
'& .MuiDrawer-paper': {boxSizing: 'border-box', width: drawerWidth}
}} open>
{drawer} {drawer}
</Drawer> </Drawer>
</> </>