162 lines
4.0 KiB
TypeScript
162 lines
4.0 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
AppBar,
|
|
Toolbar,
|
|
Typography,
|
|
IconButton,
|
|
Menu,
|
|
MenuItem,
|
|
Avatar,
|
|
ListItemIcon,
|
|
Divider,
|
|
Box,
|
|
} from '@mui/material';
|
|
import {
|
|
LocalFireDepartment,
|
|
Person,
|
|
Settings,
|
|
Logout,
|
|
Menu as MenuIcon,
|
|
} from '@mui/icons-material';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
interface HeaderProps {
|
|
onMenuClick: () => void;
|
|
}
|
|
|
|
function Header({ onMenuClick }: HeaderProps) {
|
|
const { user, logout } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
|
|
const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleMenuClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
const handleProfile = () => {
|
|
handleMenuClose();
|
|
navigate('/profile');
|
|
};
|
|
|
|
const handleSettings = () => {
|
|
handleMenuClose();
|
|
navigate('/settings');
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
handleMenuClose();
|
|
logout();
|
|
};
|
|
|
|
// Get initials for avatar
|
|
const getInitials = () => {
|
|
if (!user) return '?';
|
|
const initials = (user.given_name?.[0] || '') + (user.family_name?.[0] || '');
|
|
return initials || user.name?.[0] || '?';
|
|
};
|
|
|
|
return (
|
|
<AppBar
|
|
position="fixed"
|
|
sx={{
|
|
zIndex: (theme) => theme.zIndex.drawer + 1,
|
|
}}
|
|
>
|
|
<Toolbar>
|
|
<IconButton
|
|
color="inherit"
|
|
aria-label="Menü öffnen"
|
|
edge="start"
|
|
onClick={onMenuClick}
|
|
sx={{ mr: 2, display: { sm: 'none' } }}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
|
|
<LocalFireDepartment sx={{ mr: 2 }} />
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Feuerwehr Dashboard
|
|
</Typography>
|
|
|
|
{user && (
|
|
<>
|
|
<IconButton
|
|
onClick={handleMenuOpen}
|
|
size="small"
|
|
aria-label="Benutzerkonto"
|
|
aria-controls="user-menu"
|
|
aria-haspopup="true"
|
|
>
|
|
<Avatar
|
|
sx={{
|
|
bgcolor: 'secondary.main',
|
|
width: 32,
|
|
height: 32,
|
|
fontSize: '0.875rem',
|
|
}}
|
|
>
|
|
{getInitials()}
|
|
</Avatar>
|
|
</IconButton>
|
|
|
|
<Menu
|
|
id="user-menu"
|
|
anchorEl={anchorEl}
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleMenuClose}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right',
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
PaperProps={{
|
|
elevation: 3,
|
|
sx: { minWidth: 250, mt: 1 },
|
|
}}
|
|
>
|
|
<Box sx={{ px: 2, py: 1.5 }}>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
|
|
{user.name}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{user.email}
|
|
</Typography>
|
|
</Box>
|
|
<Divider />
|
|
<MenuItem onClick={handleProfile}>
|
|
<ListItemIcon>
|
|
<Person fontSize="small" />
|
|
</ListItemIcon>
|
|
Profil
|
|
</MenuItem>
|
|
<MenuItem onClick={handleSettings}>
|
|
<ListItemIcon>
|
|
<Settings fontSize="small" />
|
|
</ListItemIcon>
|
|
Einstellungen
|
|
</MenuItem>
|
|
<Divider />
|
|
<MenuItem onClick={handleLogout}>
|
|
<ListItemIcon>
|
|
<Logout fontSize="small" />
|
|
</ListItemIcon>
|
|
Abmelden
|
|
</MenuItem>
|
|
</Menu>
|
|
</>
|
|
)}
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
}
|
|
|
|
export default Header;
|