u

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>
   );