u

src/components/AppShell.jsx

@@ -5,7 +5,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import UserMenu from './UserMenu';
-import { NAV_ITEMS } from '../nav';
+import { NAV_ITEMS, isNavItemActive } from '../nav';
 import { artikelQueryPath } from '../pages/artikel/artikelQuery';
 
 const SIDEBAR_WIDTH = 144;
@@ -28,7 +28,7 @@ export default function AppShell() {
       >
         <List disablePadding sx={{ flexGrow: 1 }}>
           {NAV_ITEMS.map(({ path, label, icon: Icon }) => {
-            const active = pathname === path || pathname.startsWith(`${path}/`);
+            const active = isNavItemActive(pathname, path);
 
             return (
               <ListItemButton