121 lines
2.6 KiB
TypeScript
121 lines
2.6 KiB
TypeScript
import { styled } from "@mui/material/styles";
|
|
import Avatar from "@mui/material/Avatar";
|
|
import MuiDrawer, { drawerClasses } from "@mui/material/Drawer";
|
|
import Box from "@mui/material/Box";
|
|
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import MenuContent from "../MenuContent";
|
|
import OptionsMenu from "../OptionsMenu";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import React, { useEffect } from "react";
|
|
import { ArrowLeftIcon, ArrowRightIcon } from "@mui/x-date-pickers";
|
|
import { AppDispatch, RootState } from "../../redux/store/store";
|
|
import { Button } from "@mui/material";
|
|
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
|
|
|
|
const drawerWidth = 240;
|
|
|
|
const Drawer = styled(MuiDrawer)({
|
|
width: drawerWidth,
|
|
flexShrink: 0,
|
|
boxSizing: "border-box",
|
|
mt: 10,
|
|
[`& .${drawerClasses.paper}`]: {
|
|
width: drawerWidth,
|
|
boxSizing: "border-box",
|
|
},
|
|
});
|
|
|
|
export default function SideMenu() {
|
|
const [open, setOpen] = React.useState(true);
|
|
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const { user } = useSelector((state: RootState) => state?.profileReducer);
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchAdminProfile());
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
variant="permanent"
|
|
anchor="left"
|
|
sx={{
|
|
display: {
|
|
xs: "none",
|
|
md: "block",
|
|
width: open ? 250 : 80,
|
|
transition: "all 0.5s ease",
|
|
},
|
|
[`& .${drawerClasses.paper}`]: {
|
|
backgroundColor: "background.paper",
|
|
width: open ? 250 : 80,
|
|
transition: "all 0.5s ease",
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
pt: 2,
|
|
pl: 2,
|
|
}}
|
|
>
|
|
|
|
<Avatar
|
|
alt="Logo"
|
|
src="/Digilogo.png"
|
|
sx={{
|
|
width: "50px",
|
|
height: "50px",
|
|
|
|
}}
|
|
/>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
pt: 2,
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{/* Digi EV Text Section */}
|
|
<Typography
|
|
variant="body2"
|
|
color="#D9D8D8"
|
|
sx={{
|
|
fontWeight: "bold",
|
|
fontSize: "16px",
|
|
}}
|
|
>
|
|
Digi EV
|
|
</Typography>
|
|
<Typography variant="subtitle2" color="#D9D8D8" >
|
|
{user?.userType || "N/A"}
|
|
</Typography>
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: open ? "flex-end" : "center",
|
|
alignItems: "center",
|
|
pt: 1.5,
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<Button variant="text" onClick={() => setOpen(!open)}>
|
|
{open ? <ArrowLeftIcon /> : <ArrowRightIcon />}
|
|
</Button>
|
|
</Box>
|
|
<MenuContent hidden={open} />
|
|
</Drawer>
|
|
);
|
|
}
|