2022-11-28 16:39:13 -05:00
|
|
|
import IconButton from '@mui/material/IconButton';
|
|
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
|
|
import React, { useCallback, useState } from 'react';
|
|
|
|
|
2023-09-27 02:07:40 -04:00
|
|
|
import UserAvatar from 'components/UserAvatar';
|
2022-11-28 16:39:13 -05:00
|
|
|
import { useApi } from 'hooks/useApi';
|
2024-08-14 13:31:34 -04:00
|
|
|
import globalize from 'lib/globalize';
|
2022-11-28 16:39:13 -05:00
|
|
|
|
2023-09-27 02:07:40 -04:00
|
|
|
import AppUserMenu, { ID } from './AppUserMenu';
|
2022-11-28 16:39:13 -05:00
|
|
|
|
|
|
|
const UserMenuButton = () => {
|
2023-06-04 02:34:40 -04:00
|
|
|
const { user } = useApi();
|
2022-11-28 16:39:13 -05:00
|
|
|
|
|
|
|
const [ userMenuAnchorEl, setUserMenuAnchorEl ] = useState<null | HTMLElement>(null);
|
|
|
|
const isUserMenuOpen = Boolean(userMenuAnchorEl);
|
|
|
|
|
2024-06-02 20:58:11 +03:00
|
|
|
const onUserButtonClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
|
2022-11-28 16:39:13 -05:00
|
|
|
setUserMenuAnchorEl(event.currentTarget);
|
|
|
|
}, [ setUserMenuAnchorEl ]);
|
|
|
|
|
|
|
|
const onUserMenuClose = useCallback(() => {
|
|
|
|
setUserMenuAnchorEl(null);
|
|
|
|
}, [ setUserMenuAnchorEl ]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Tooltip title={globalize.translate('UserMenu')}>
|
|
|
|
<IconButton
|
|
|
|
size='large'
|
|
|
|
edge='end'
|
|
|
|
aria-label={globalize.translate('UserMenu')}
|
|
|
|
aria-controls={ID}
|
|
|
|
aria-haspopup='true'
|
|
|
|
onClick={onUserButtonClick}
|
|
|
|
color='inherit'
|
|
|
|
sx={{ padding: 0 }}
|
|
|
|
>
|
2023-06-04 02:34:40 -04:00
|
|
|
<UserAvatar user={user} />
|
2022-11-28 16:39:13 -05:00
|
|
|
</IconButton>
|
|
|
|
</Tooltip>
|
|
|
|
|
|
|
|
<AppUserMenu
|
|
|
|
open={isUserMenuOpen}
|
|
|
|
anchorEl={userMenuAnchorEl}
|
|
|
|
onMenuClose={onUserMenuClose}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default UserMenuButton;
|