Created the Sidebar.jsx component

2023-07-30 20:45:56 +02:00
parent bd4b68796b
commit 3a56ae5176
1 changed files with 73 additions and 0 deletions
--- a/src/states/Dashboard/components/Sidebar/Sidebar.jsx
+++ b/src/states/Dashboard/components/Sidebar/Sidebar.jsx
@ -0,0 +1,73 @@
+import {
+    Divider,
+    Drawer,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Stack,
+    Toolbar, Typography, useTheme
+} from "@mui/material";
+import {useLocation, useNavigate} from "react-router-dom";
+import {sidebar} from "@/common/routes";
+import DarkLogo from "@/common/assets/images/logo/small-dark.webp";
+import LightLogo from "@/common/assets/images/logo/small-light.webp";
+
+const drawerWidth = 240;
+
+export const Sidebar = ({mobileOpen, toggleOpen, window: containerWindow}) => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const theme = useTheme();
+    const logo = theme.palette.mode === "dark" ? DarkLogo : LightLogo;
+
+    const container = containerWindow !== undefined ? () => containerWindow().document.body : undefined;
+
+    const isSelected = (path) => {
+        if (path === "/") return location.pathname === "/";
+
+        return location.pathname.startsWith(path);
+    }
+
+    const drawer = (
+        <>
+            <Toolbar>
+                <Stack direction="row" alignItems="center" gap={1}>
+                    <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 />
+
+            </List>
+        </>
+    );
+
+    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 }}}>
+                {drawer}
+            </Drawer>
+            <Drawer variant="permanent" sx={{display: { xs: 'none', sm: 'block' },
+                '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth }}} open>
+                {drawer}
+            </Drawer>
+        </>
+    )
+}