65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import {
|
|
Menu,
|
|
MenuItem,
|
|
IconButton,
|
|
ListItemIcon,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
|
import SettingsIcon from "@mui/icons-material/Settings";
|
|
import LogoutIcon from "@mui/icons-material/Logout";
|
|
|
|
export default function AccountMenu() {
|
|
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 (
|
|
<>
|
|
<IconButton onClick={handleClick} color="inherit">
|
|
<AccountCircleIcon />
|
|
</IconButton>
|
|
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={open}
|
|
onClose={handleClose}
|
|
onClick={handleClose}
|
|
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
|
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
|
>
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<AccountCircleIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<Typography variant="inherit">Account</Typography>
|
|
</MenuItem>
|
|
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<SettingsIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<Typography variant="inherit">Settings</Typography>
|
|
</MenuItem>
|
|
|
|
<MenuItem>
|
|
<ListItemIcon>
|
|
<LogoutIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<Typography variant="inherit">Sign out</Typography>
|
|
</MenuItem>
|
|
</Menu>
|
|
</>
|
|
);
|
|
}
|