routes

src/components/SectionLayout.jsx

@@ -0,0 +1,20 @@
+import { Outlet, useLocation } from 'react-router-dom';
+import PageLayout from './PageLayout';
+import { NAV_ITEMS, SUB_NAV } from '../nav';
+
+export default function SectionLayout({ sectionPath }) {
+  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;
+
+  return (
+    <PageLayout title={pageTitle} subNav={subNav} basePath={sectionPath}>
+      <Outlet />
+    </PageLayout>
+  );
+}