nav

src/components/PageLayout.jsx

@@ -1,13 +1,68 @@
 import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
+import { NavLink } from 'react-router-dom';
+
+const SUB_NAV_WIDTH = 80;
+
+export default function PageLayout({ title, subNav, basePath, children }) {
+  const hasSubNav = subNav?.length > 0;
 
-export default function PageLayout({ title, children }) {
   return (
-    <Box>
-      <Typography variant="h5" sx={{ fontWeight: 700, mb: 2 }}>
-        {title}
-      </Typography>
-      {children}
+    <Box sx={{ display: 'flex', gap: 2, minHeight: 0 }}>
+      <Box
+        component={hasSubNav ? 'nav' : 'div'}
+        aria-label={hasSubNav ? 'Unternavigation' : undefined}
+        sx={{
+          width: SUB_NAV_WIDTH,
+          flexShrink: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 1,
+        }}
+      >
+        {hasSubNav &&
+          subNav.map(({ segment, label, icon: Icon }) => {
+            const to = segment ? `${basePath}/${segment}` : basePath;
+
+            return (
+              <Tooltip key={segment || 'index'} title={label} placement="right">
+                <IconButton
+                  component={NavLink}
+                  to={to}
+                  end={!segment}
+                  aria-label={label}
+                  disableRipple
+                  sx={(theme) => ({
+                    width: 80,
+                    height: 80,
+                    color: theme.palette.text.secondary,
+                    bgcolor: 'transparent',
+                    '&:hover': {
+                      bgcolor: 'transparent',
+                      color: theme.palette.primary.main,
+                    },
+                    '&.active': {
+                      bgcolor: 'transparent',
+                      color: theme.palette.primary.main,
+                    },
+                  })}
+                >
+                  <Icon sx={{ fontSize: 40 }} />
+                </IconButton>
+              </Tooltip>
+            );
+          })}
+      </Box>
+
+      <Box sx={{ flexGrow: 1, minWidth: 0 }}>
+        <Typography variant="h5" sx={{ fontWeight: 700, mb: 2 }}>
+          {title}
+        </Typography>
+        {children}
+      </Box>
     </Box>
   );
 }