router

src/App.jsx

@@ -1,10 +1,12 @@
 import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 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';
 
-// Top-level router by auth status. Kept tiny so it rarely re-renders.
 export default function App() {
   const { status } = useAuth();
 
@@ -23,5 +25,28 @@ export default function App() {
     );
   }
 
-  return status === 'authed' ? <AppShell /> : <LoginPage />;
+  if (status !== 'authed') {
+    return <LoginPage />;
+  }
+
+  return (
+    <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} />}
+              />
+            ),
+          )}
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
 }