nav

src/pages/SectionPage.jsx

@@ -1,10 +1,20 @@
-import Typography from '@mui/material/Typography';
+import { Outlet, useLocation } from 'react-router-dom';
 import PageLayout from '../components/PageLayout';
+import { NAV_ITEMS, SUB_NAV } from '../nav';
+
+export default function SectionPage({ sectionPath, children }) {
+  const { pathname } = useLocation();
+  const title = NAV_ITEMS.find((item) => item.path === sectionPath)?.label ?? '';
+  const subNav = SUB_NAV[sectionPath];
+  const activeSub = subNav?.find((item) => {
+    const subPath = item.segment ? `${sectionPath}/${item.segment}` : sectionPath;
+    return pathname === subPath || pathname === `${subPath}/`;
+  });
+  const pageTitle = activeSub && subNav ? activeSub.label : title;
 
-export default function SectionPage({ title }) {
   return (
-    <PageLayout title={title}>
-      <Typography color="text.secondary">Inhalt folgt.</Typography>
+    <PageLayout title={pageTitle} subNav={subNav} basePath={sectionPath}>
+      {children ?? <Outlet />}
     </PageLayout>
   );
 }

src/pages/SubPage.jsx

@@ -0,0 +1,9 @@
+import Typography from '@mui/material/Typography';
+
+export default function SubPage({ title, description }) {
+  return (
+    <Typography color="text.secondary">
+      {description ?? `${title} — Inhalt folgt.`}
+    </Typography>
+  );
+}