router

src/components/AppShell.jsx

@@ -1,21 +1,15 @@
-import { useState } from 'react';
 import Box from '@mui/material/Box';
 import List from '@mui/material/List';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
+import { NavLink, Outlet } from 'react-router-dom';
 import UserMenu from './UserMenu';
 import { NAV_ITEMS } from '../nav';
 
 const SIDEBAR_WIDTH = 240;
 
-// App layout. State lives in the children (UserMenu, page content) so the
-// shell itself does not re-render when their state changes.
 export default function AppShell() {
-  const [activeId, setActiveId] = useState(NAV_ITEMS[0].id);
-  const activeItem = NAV_ITEMS.find((item) => item.id === activeId) ?? NAV_ITEMS[0];
-  const ActivePage = activeItem.Page;
-
   return (
     <Box sx={{ display: 'flex', minHeight: '100vh', bgcolor: 'grey.50' }}>
       <Box
@@ -29,13 +23,17 @@ export default function AppShell() {
         }}
       >
         <List disablePadding sx={{ flexGrow: 1 }}>
-          {NAV_ITEMS.map(({ id, label, icon: Icon }) => (
+          {NAV_ITEMS.map(({ path, label, icon: Icon }) => (
             <ListItemButton
-              key={id}
-              disableGutters
-              selected={id === activeId}
-              onClick={() => setActiveId(id)}
-              sx={{ borderRadius: 0, px: 2 }}
+              key={path}
+              component={NavLink}
+              to={path}
+              end={path === '/'}
+              sx={{
+                borderRadius: 0,
+                px: 2,
+                '&.active': { bgcolor: 'action.selected' },
+              }}
             >
               <ListItemIcon sx={{ minWidth: 40 }}>
                 <Icon />
@@ -49,7 +47,7 @@ export default function AppShell() {
       </Box>
 
       <Box component="main" sx={{ flexGrow: 1, py: 4, px: 3 }}>
-        <ActivePage />
+        <Outlet />
       </Box>
     </Box>
   );