81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import * as React from "react";
|
|
import Avatar from "@mui/material/Avatar";
|
|
import Button from "@mui/material/Button";
|
|
import Divider from "@mui/material/Divider";
|
|
import Drawer, { drawerClasses } from "@mui/material/Drawer";
|
|
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
|
|
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";
|
|
|
|
import MenuButton from "../MenuButton";
|
|
import MenuContent from "../MenuContent";
|
|
import CardAlert from "../CardAlert/CardAlert";
|
|
|
|
interface SideMenuMobileProps {
|
|
open: boolean | undefined;
|
|
toggleDrawer: (newOpen: boolean) => () => void;
|
|
}
|
|
|
|
export default function SideMenuMobile({
|
|
open,
|
|
toggleDrawer,
|
|
}: SideMenuMobileProps) {
|
|
return (
|
|
<Drawer
|
|
anchor="right"
|
|
open={open}
|
|
onClose={toggleDrawer(false)}
|
|
sx={{
|
|
zIndex: (theme) => theme.zIndex.drawer + 1,
|
|
[`& .${drawerClasses.paper}`]: {
|
|
backgroundImage: "none",
|
|
backgroundColor: "background.paper",
|
|
},
|
|
}}
|
|
>
|
|
<Stack
|
|
sx={{
|
|
maxWidth: "70dvw",
|
|
height: "100%",
|
|
}}
|
|
>
|
|
<Stack direction="row" sx={{ p: 2, pb: 0, gap: 1 }}>
|
|
<Stack
|
|
direction="row"
|
|
sx={{ gap: 1, alignItems: "center", flexGrow: 1, p: 1 }}
|
|
>
|
|
<Avatar
|
|
sizes="small"
|
|
alt="Riley Carter"
|
|
src="/static/images/avatar/7.jpg"
|
|
sx={{ width: 24, height: 24 }}
|
|
/>
|
|
<Typography component="p" variant="h6">
|
|
Riley Carter
|
|
</Typography>
|
|
</Stack>
|
|
<MenuButton showBadge>
|
|
<NotificationsRoundedIcon />
|
|
</MenuButton>
|
|
</Stack>
|
|
<Divider />
|
|
<Stack sx={{ flexGrow: 1 }}>
|
|
<MenuContent />
|
|
<Divider />
|
|
</Stack>
|
|
<CardAlert />
|
|
<Stack sx={{ p: 2 }}>
|
|
<Button
|
|
variant="outlined"
|
|
fullWidth
|
|
startIcon={<LogoutRoundedIcon />}
|
|
>
|
|
Logout
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</Drawer>
|
|
);
|
|
}
|