u

src/components/PageLayout.jsx

@@ -19,7 +19,7 @@ function isSubNavActive(pathname, basePath, segment) {
   return pathname === subPath || pathname === `${subPath}/`;
 }
 
-export default function PageLayout({ title, showTitle = true, subNav, basePath, children }) {
+export default function PageLayout({ title, showTitle = true, titleAction, subNav, basePath, children }) {
   const hasSubNav = subNav?.length > 0;
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -81,9 +81,12 @@ export default function PageLayout({ title, showTitle = true, subNav, basePath,
 
       <Box sx={{ flexGrow: 1, minWidth: 0 }}>
         {showTitle ? (
-          <Typography variant="h5" sx={{ fontWeight: 700, mb: 2 }}>
-            {title}
-          </Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 2 }}>
+            <Typography variant="h5" sx={{ fontWeight: 700 }}>
+              {title}
+            </Typography>
+            {titleAction}
+          </Box>
         ) : null}
         {children}
       </Box>

src/components/SectionLayout.jsx

@@ -1,10 +1,16 @@
 import { Outlet, useLocation } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 import PageLayout from './PageLayout';
 import { NAV_ITEMS, SUB_NAV } from '../nav';
 import { isKategorienPath } from '../pages/artikel/categoryRoute';
+import { selectRenameMode, setRenameMode } from '../store/categorySlice';
 
 export default function SectionLayout({ sectionPath }) {
   const { pathname } = useLocation();
+  const dispatch = useDispatch();
+  const renameMode = useSelector(selectRenameMode);
   const title = NAV_ITEMS.find((item) => item.path === sectionPath)?.label ?? '';
   const subNav = SUB_NAV[sectionPath];
   const activeSub = subNav?.find((item) => {
@@ -27,8 +33,31 @@ export default function SectionLayout({ sectionPath }) {
     ? title
     : (activeSub?.label ?? title);
 
+  const showsRenameSwitch = activeSub?.segment === 'kategorien';
+
+  const titleAction = showsRenameSwitch ? (
+    <FormControlLabel
+      control={
+        <Switch
+          size="small"
+          checked={renameMode}
+          onChange={(event) => dispatch(setRenameMode(event.target.checked))}
+        />
+      }
+      label="Editieren"
+      labelPlacement="end"
+      sx={{ ml: 0 }}
+    />
+  ) : null;
+
   return (
-    <PageLayout title={pageTitle} showTitle={!isArticleDetail} subNav={subNav} basePath={sectionPath}>
+    <PageLayout
+      title={pageTitle}
+      showTitle={!isArticleDetail}
+      subNav={subNav}
+      basePath={sectionPath}
+      titleAction={titleAction}
+    >
       <Outlet />
     </PageLayout>
   );