inital

frontend/src/components/shared/Sidebar.tsx

@@ -0,0 +1,156 @@
+import {
+  Drawer,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+  Tooltip,
+} from '@mui/material';
+import {
+  Dashboard as DashboardIcon,
+  LocalFireDepartment,
+  DirectionsCar,
+  Build,
+  People,
+} 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: 'Einsätze',
+    icon: <LocalFireDepartment />,
+    path: '/einsaetze',
+  },
+  {
+    text: 'Fahrzeuge',
+    icon: <DirectionsCar />,
+    path: '/fahrzeuge',
+  },
+  {
+    text: 'Ausrüstung',
+    icon: <Build />,
+    path: '/ausruestung',
+  },
+  {
+    text: 'Mitglieder',
+    icon: <People />,
+    path: '/mitglieder',
+  },
+];
+
+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;