nav

src/components/AppShell.jsx

@@ -7,7 +7,7 @@ import { NavLink, Outlet } from 'react-router-dom';
 import UserMenu from './UserMenu';
 import { NAV_ITEMS } from '../nav';
 
-const SIDEBAR_WIDTH = 240;
+const SIDEBAR_WIDTH = 144;
 
 export default function AppShell() {
   return (
@@ -31,8 +31,9 @@ export default function AppShell() {
               end={path === '/'}
               sx={(theme) => ({
                 borderRadius: 0,
-                px: 2,
+                px: 1.5,
                 py: 1.25,
+                borderLeft: '3px solid transparent',
                 color: theme.nav.item,
                 '& .MuiListItemIcon-root': { color: 'inherit' },
                 '&:hover': {
@@ -43,12 +44,11 @@ export default function AppShell() {
                   bgcolor: theme.nav.itemActive,
                   color: theme.nav.itemActiveText,
                   fontWeight: 600,
-                  borderLeft: `3px solid ${theme.nav.itemActiveAccent}`,
-                  pl: '13px',
+                  borderLeftColor: theme.nav.itemActiveAccent,
                 },
               })}
             >
-              <ListItemIcon sx={{ minWidth: 40 }}>
+              <ListItemIcon sx={{ minWidth: 36 }}>
                 <Icon />
               </ListItemIcon>
               <ListItemText primary={label} />

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>
   );
 }

src/components/UserMenu.jsx

@@ -17,7 +17,7 @@ export default function UserMenu() {
 
   return (
     <>
-      <Box sx={{ px: 2, py: 1.5, alignSelf: 'flex-start' }}>
+      <Box sx={{ px: 1.5, py: 1.5, alignSelf: 'flex-start' }}>
         <IconButton
           onClick={(e) => setAnchorEl(e.currentTarget)}
           sx={{ p: 0, width: 32, height: 32, borderRadius: '50%' }}