nav

src/App.jsx

@@ -5,7 +5,47 @@ import { useAuth } from './auth/useAuth';
 import LoginPage from './components/LoginPage';
 import AppShell from './components/AppShell';
 import SectionPage from './pages/SectionPage';
-import { NAV_ITEMS } from './nav';
+import SubPage from './pages/SubPage';
+import { NAV_ITEMS, SUB_NAV } from './nav';
+
+function sectionRoutes(path) {
+  const subNav = SUB_NAV[path];
+  const routePath = path === '/' ? undefined : path.slice(1);
+
+  if (subNav) {
+    return (
+      <Route key={path} path={routePath} element={<SectionPage sectionPath={path} />}>
+        {subNav.map(({ segment, label }) =>
+          segment ? (
+            <Route
+              key={segment}
+              path={segment}
+              element={<SubPage title={label} />}
+            />
+          ) : (
+            <Route key="index" index element={<SubPage title={label} />} />
+          ),
+        )}
+      </Route>
+    );
+  }
+
+  const label = NAV_ITEMS.find((n) => n.path === path)?.label;
+
+  if (path === '/') {
+    return (
+      <Route key={path} index element={<SectionPage sectionPath={path}><SubPage title={label} /></SectionPage>} />
+    );
+  }
+
+  return (
+    <Route
+      key={path}
+      path={routePath}
+      element={<SectionPage sectionPath={path}><SubPage title={label} /></SectionPage>}
+    />
+  );
+}
 
 export default function App() {
   const { status } = useAuth();
@@ -34,17 +74,7 @@ export default function App() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<AppShell />}>
-          {NAV_ITEMS.map(({ path, label }) =>
-            path === '/' ? (
-              <Route key={path} index element={<SectionPage title={label} />} />
-            ) : (
-              <Route
-                key={path}
-                path={path.slice(1)}
-                element={<SectionPage title={label} />}
-              />
-            ),
-          )}
+          {NAV_ITEMS.map((item) => sectionRoutes(item.path))}
           <Route path="*" element={<Navigate to="/" replace />} />
         </Route>
       </Routes>