82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
import * as React from "react";
|
|
import { styled } from "@mui/material/styles";
|
|
import Menu from "@mui/material/Menu";
|
|
import MuiMenuItem from "@mui/material/MenuItem";
|
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
import Link from "@mui/material/Link";
|
|
import Logout from "../LogOutFunction/LogOutFunction";
|
|
import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
|
|
import { ListItemText } from "@mui/material";
|
|
const MenuItem = styled(MuiMenuItem)({
|
|
margin: "2px 0",
|
|
borderBottom: "none",
|
|
});
|
|
|
|
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
|
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
|
|
const open = Boolean(anchorEl);
|
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event?.currentTarget);
|
|
};
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<ExpandMoreIcon onClick={handleClick} />
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
id="top-menu"
|
|
open={open}
|
|
onClose={handleClose}
|
|
onClick={handleClose}
|
|
slotProps={{
|
|
paper: {
|
|
elevation: 0,
|
|
sx: {
|
|
overflow: "visible",
|
|
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
|
|
mt: 1.5,
|
|
"& .MuiMenuItem-root": {
|
|
borderBottom: "none", // Remove any divider under menu items
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
|
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
|
>
|
|
<Link
|
|
href={"/panel/profile"}
|
|
underline="none"
|
|
sx={{
|
|
"&::before": {
|
|
display: "none",
|
|
},
|
|
}}
|
|
>
|
|
<MenuItem onClick={handleClose}>Profile</MenuItem>
|
|
</Link>
|
|
<MenuItem onClick={handleClose} sx={{ color: "#E8533B" }}>
|
|
<ListItemText
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setLogoutModal(true);
|
|
}}
|
|
sx={{ color: "red" }}
|
|
>
|
|
Logout
|
|
</ListItemText>
|
|
|
|
<Logout
|
|
setLogoutModal={setLogoutModal}
|
|
logoutModal={logoutModal}
|
|
/>
|
|
</MenuItem>
|
|
</Menu>
|
|
</React.Fragment>
|
|
);
|
|
}
|