1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
jellyfin-web/src/components/toolbar/UserMenuButton.tsx

52 lines
1.6 KiB
TypeScript
Raw Normal View History

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';
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
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;