157 lines
3.5 KiB
TypeScript
157 lines
3.5 KiB
TypeScript
import {
|
|
Drawer,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Toolbar,
|
|
Tooltip,
|
|
} from '@mui/material';
|
|
import {
|
|
Dashboard as DashboardIcon,
|
|
DirectionsCar,
|
|
Build,
|
|
People,
|
|
Air,
|
|
} from '@mui/icons-material';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
|
|
const DRAWER_WIDTH = 240;
|
|
|
|
interface NavigationItem {
|
|
text: string;
|
|
icon: JSX.Element;
|
|
path: string;
|
|
}
|
|
|
|
const navigationItems: NavigationItem[] = [
|
|
{
|
|
text: 'Dashboard',
|
|
icon: <DashboardIcon />,
|
|
path: '/dashboard',
|
|
},
|
|
{
|
|
text: 'Fahrzeuge',
|
|
icon: <DirectionsCar />,
|
|
path: '/fahrzeuge',
|
|
},
|
|
{
|
|
text: 'Ausrüstung',
|
|
icon: <Build />,
|
|
path: '/ausruestung',
|
|
},
|
|
{
|
|
text: 'Mitglieder',
|
|
icon: <People />,
|
|
path: '/mitglieder',
|
|
},
|
|
{
|
|
text: 'Atemschutz',
|
|
icon: <Air />,
|
|
path: '/atemschutz',
|
|
},
|
|
];
|
|
|
|
interface SidebarProps {
|
|
mobileOpen: boolean;
|
|
onMobileClose: () => void;
|
|
}
|
|
|
|
function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
const handleNavigation = (path: string) => {
|
|
navigate(path);
|
|
onMobileClose();
|
|
};
|
|
|
|
const drawerContent = (
|
|
<>
|
|
<Toolbar />
|
|
<List>
|
|
{navigationItems.map((item) => {
|
|
const isActive = location.pathname === item.path;
|
|
return (
|
|
<ListItem key={item.text} disablePadding>
|
|
<Tooltip title={item.text} placement="right" arrow>
|
|
<ListItemButton
|
|
selected={isActive}
|
|
onClick={() => handleNavigation(item.path)}
|
|
aria-label={`Zu ${item.text} navigieren`}
|
|
sx={{
|
|
'&.Mui-selected': {
|
|
backgroundColor: 'primary.light',
|
|
color: 'primary.contrastText',
|
|
'&:hover': {
|
|
backgroundColor: 'primary.main',
|
|
},
|
|
'& .MuiListItemIcon-root': {
|
|
color: 'primary.contrastText',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<ListItemIcon
|
|
sx={{
|
|
color: isActive ? 'inherit' : 'text.secondary',
|
|
}}
|
|
>
|
|
{item.icon}
|
|
</ListItemIcon>
|
|
<ListItemText primary={item.text} />
|
|
</ListItemButton>
|
|
</Tooltip>
|
|
</ListItem>
|
|
);
|
|
})}
|
|
</List>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile drawer */}
|
|
<Drawer
|
|
variant="temporary"
|
|
open={mobileOpen}
|
|
onClose={onMobileClose}
|
|
ModalProps={{
|
|
keepMounted: true, // Better mobile performance
|
|
}}
|
|
sx={{
|
|
display: { xs: 'block', sm: 'none' },
|
|
'& .MuiDrawer-paper': {
|
|
boxSizing: 'border-box',
|
|
width: DRAWER_WIDTH,
|
|
},
|
|
}}
|
|
aria-label="Mobile Navigation"
|
|
>
|
|
{drawerContent}
|
|
</Drawer>
|
|
|
|
{/* Desktop drawer */}
|
|
<Drawer
|
|
variant="permanent"
|
|
sx={{
|
|
display: { xs: 'none', sm: 'block' },
|
|
width: DRAWER_WIDTH,
|
|
flexShrink: 0,
|
|
'& .MuiDrawer-paper': {
|
|
width: DRAWER_WIDTH,
|
|
boxSizing: 'border-box',
|
|
},
|
|
}}
|
|
open
|
|
aria-label="Desktop Navigation"
|
|
>
|
|
{drawerContent}
|
|
</Drawer>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Sidebar;
|