u

src/components/PageLayout.jsx

@@ -4,21 +4,24 @@ import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { artikelQueryPath } from '../pages/artikel/artikelQuery';
+import { defaultCategoryPath, isKategorienPath } from '../pages/artikel/categoryRoute';
 
 const SUB_NAV_WIDTH = 80;
 
 function isSubNavActive(pathname, basePath, segment, knownSegments) {
   if (!segment) {
     if (pathname === basePath || pathname === `${basePath}/`) return true;
-    // /artikel/:sku detail — highlight overview, not kategorien/lager
     const rest = pathname.slice(basePath.length).replace(/^\//, '');
     return Boolean(rest) && !rest.includes('/') && !knownSegments.has(rest);
   }
+  if (segment === 'kategorien') {
+    return isKategorienPath(pathname);
+  }
   const subPath = `${basePath}/${segment}`;
   return pathname === subPath || pathname === `${subPath}/`;
 }
 
-export default function PageLayout({ title, subNav, basePath, children }) {
+export default function PageLayout({ title, showTitle = true, subNav, basePath, children }) {
   const hasSubNav = subNav?.length > 0;
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -55,6 +58,10 @@ export default function PageLayout({ title, subNav, basePath, children }) {
                       navigate(artikelQueryPath());
                       return;
                     }
+                    if (segment === 'kategorien') {
+                      navigate(defaultCategoryPath());
+                      return;
+                    }
                     navigate(segment ? `${basePath}/${segment}` : basePath);
                   }}
                   sx={(theme) => ({
@@ -77,9 +84,11 @@ export default function PageLayout({ title, subNav, basePath, children }) {
       </Box>
 
       <Box sx={{ flexGrow: 1, minWidth: 0 }}>
-        <Typography variant="h5" sx={{ fontWeight: 700, mb: 2 }}>
-          {title}
-        </Typography>
+        {showTitle ? (
+          <Typography variant="h5" sx={{ fontWeight: 700, mb: 2 }}>
+            {title}
+          </Typography>
+        ) : null}
         {children}
       </Box>
     </Box>