67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import {
|
|
IconButton, Menu, MenuItem, Avatar, Tooltip, Typography
|
|
} from '@mui/material';
|
|
|
|
const ProfileMenu = ({ user, onLogout }) => {
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
const open = Boolean(anchorEl);
|
|
|
|
const handleOpen = (event) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const handleLogoutClick = () => {
|
|
handleClose();
|
|
onLogout();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Tooltip title="Профиль">
|
|
<IconButton onClick={handleOpen} size="small" sx={{ ml: 2 }}>
|
|
<Avatar sx={{ bgcolor: 'primary.main' }}>
|
|
{user?.login?.[0]?.toUpperCase() || '?'}
|
|
</Avatar>
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={open}
|
|
onClose={handleClose}
|
|
onClick={handleClose}
|
|
PaperProps={{
|
|
elevation: 3,
|
|
sx: {
|
|
mt: 1.5,
|
|
minWidth: 180,
|
|
},
|
|
}}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right',
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
>
|
|
<MenuItem disabled>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{user?.login || 'Неизвестный'}
|
|
</Typography>
|
|
</MenuItem>
|
|
<MenuItem onClick={handleLogoutClick}>
|
|
Выйти
|
|
</MenuItem>
|
|
</Menu>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProfileMenu;
|