90 lines
2.7 KiB
TypeScript
90 lines
2.7 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';
|
|
|
|
const MenuItem = styled(MuiMenuItem)({
|
|
margin: '2px 0',
|
|
});
|
|
|
|
export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
|
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
|
const open = Boolean(anchorEl);
|
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
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={handleClose}>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,
|
|
},
|
|
}}
|
|
>
|
|
<ListItemText>Logout</ListItemText>
|
|
<ListItemIcon>
|
|
<LogoutRoundedIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
</MenuItem>
|
|
</Menu>
|
|
</React.Fragment>
|
|
);
|
|
}
|