70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
import { useState } from 'react';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Box from '@mui/material/Box';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Menu from '@mui/material/Menu';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import ListItemIcon from '@mui/material/ListItemIcon';
|
|
import ListItemText from '@mui/material/ListItemText';
|
|
import LogoutIcon from '@mui/icons-material/Logout';
|
|
import BusinessIcon from '@mui/icons-material/Business';
|
|
import { useAuth } from '../auth/useAuth';
|
|
import CompanySettingsDialog from './CompanySettingsDialog';
|
|
|
|
// Menu open/close state is local; toggling it only re-renders this component.
|
|
export default function UserMenu() {
|
|
const { user, logout } = useAuth();
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
const open = Boolean(anchorEl);
|
|
|
|
return (
|
|
<>
|
|
<Box sx={{ px: 1.5, py: 1.5, alignSelf: 'flex-start' }}>
|
|
<IconButton
|
|
onClick={(e) => setAnchorEl(e.currentTarget)}
|
|
onMouseDown={(e) => e.preventDefault()}
|
|
sx={{ p: 0, width: 32, height: 32, borderRadius: '50%' }}
|
|
>
|
|
<Avatar src={user?.picture} alt={user?.email} sx={{ width: 32, height: 32 }}>
|
|
{user?.email?.[0]?.toUpperCase()}
|
|
</Avatar>
|
|
</IconButton>
|
|
</Box>
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={open}
|
|
onClose={() => setAnchorEl(null)}
|
|
anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
|
|
transformOrigin={{ vertical: 'bottom', horizontal: 'left' }}
|
|
>
|
|
<MenuItem disabled>{user?.email}</MenuItem>
|
|
<MenuItem
|
|
disabled={!user?.selectedCompanyId}
|
|
onClick={() => {
|
|
setAnchorEl(null);
|
|
setSettingsOpen(true);
|
|
}}
|
|
>
|
|
<ListItemIcon>
|
|
<BusinessIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText>Unternehmen</ListItemText>
|
|
</MenuItem>
|
|
<MenuItem
|
|
onClick={() => {
|
|
setAnchorEl(null);
|
|
logout();
|
|
}}
|
|
>
|
|
<ListItemIcon>
|
|
<LogoutIcon fontSize="small" />
|
|
</ListItemIcon>
|
|
<ListItemText>Sign out</ListItemText>
|
|
</MenuItem>
|
|
</Menu>
|
|
<CompanySettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
|
|
</>
|
|
);
|
|
}
|