120 lines
4.3 KiB
TypeScript
120 lines
4.3 KiB
TypeScript
import * as React from "react";
|
|
import { styled } from "@mui/material/styles";
|
|
import Divider, { dividerClasses } from "@mui/material/Divider";
|
|
import Menu from "@mui/material/Menu";
|
|
import MuiMenuItem from "@mui/material/MenuItem";
|
|
import { paperClasses } from "@mui/material/Paper";
|
|
import { listClasses } from "@mui/material/List";
|
|
import ListItemText from "@mui/material/ListItemText";
|
|
import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
|
|
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
|
|
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
|
|
import MenuButton from "../MenuButton";
|
|
import { Avatar } from "@mui/material";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Logout from "../LogOutFunction/LogOutFunction";
|
|
|
|
const MenuItem = styled(MuiMenuItem)({
|
|
margin: "2px 0",
|
|
});
|
|
|
|
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);
|
|
};
|
|
//Eknoor singh and jaanvi
|
|
//date:- 12-Feb-2025
|
|
//Made a navigation page for the profile page
|
|
const navigate = useNavigate();
|
|
const handleProfile = () => {
|
|
navigate("/panel/profile");
|
|
};
|
|
|
|
//jaanvi
|
|
//date:- 13-Feb-2025
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<MenuButton
|
|
aria-label="Open menu"
|
|
onClick={handleClick}
|
|
sx={{ borderColor: "transparent" }}
|
|
>
|
|
{avatar ? (
|
|
<MoreVertRoundedIcon />
|
|
) : (
|
|
<Avatar
|
|
sizes="small"
|
|
alt="Riley Carter"
|
|
src="/static/images/avatar/7.jpg"
|
|
sx={{ width: 36, height: 36 }}
|
|
/>
|
|
)}
|
|
</MenuButton>
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
id="menu"
|
|
open={open}
|
|
onClose={handleClose}
|
|
onClick={handleClose}
|
|
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
|
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
|
sx={{
|
|
[`& .${listClasses.root}`]: {
|
|
padding: "4px",
|
|
},
|
|
[`& .${paperClasses.root}`]: {
|
|
padding: 0,
|
|
},
|
|
[`& .${dividerClasses.root}`]: {
|
|
margin: "4px -4px",
|
|
},
|
|
}}
|
|
>
|
|
<MenuItem onClick={handleProfile}>Profile</MenuItem>
|
|
<MenuItem onClick={handleClose}>My account</MenuItem>
|
|
<Divider />
|
|
<MenuItem onClick={handleClose}>Add another account</MenuItem>
|
|
<MenuItem onClick={handleClose}>Settings</MenuItem>
|
|
<Divider />
|
|
<MenuItem
|
|
onClick={handleClose}
|
|
sx={{
|
|
[`& .${listItemIconClasses.root}`]: {
|
|
ml: "auto",
|
|
minWidth: 0,
|
|
},
|
|
}}
|
|
>
|
|
{/* //Eknoor singh and jaanvi
|
|
//date:- 13-Feb-2025
|
|
//Implemented logout functionality which was static previously */}
|
|
|
|
<ListItemText
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setLogoutModal(true);
|
|
}}
|
|
>
|
|
Logout
|
|
</ListItemText>
|
|
<Logout
|
|
setLogoutModal={setLogoutModal}
|
|
logoutModal={logoutModal}
|
|
/>
|
|
|
|
<ListItemIcon>
|
|
<LogoutRoundedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
</MenuItem>
|
|
</Menu>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
|