From 4e708d0a14176f1aa55c7d77ac3e46ef432afcf4 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Tue, 9 Sep 2025 19:35:31 +0200
Subject: [PATCH] feat(ui): add configurator navigation button to header

Introduce a new button in the CategoryList component that links to the
Konfigurator page, featuring a SettingsIcon and responsive styling for
mobile and desktop views. Includes text overlay effects for active state
visualization and i18n support for "home" label.
---
 src/components/header/CategoryList.js | 79 +++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/src/components/header/CategoryList.js b/src/components/header/CategoryList.js
index 6c27ac1..828643b 100644
--- a/src/components/header/CategoryList.js
+++ b/src/components/header/CategoryList.js
@@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography";
 import Collapse from "@mui/material/Collapse";
 import { Link } from "react-router-dom";
 import HomeIcon from "@mui/icons-material/Home";
+import SettingsIcon from "@mui/icons-material/Settings";
 import MenuIcon from "@mui/icons-material/Menu";
 import CloseIcon from "@mui/icons-material/Close";
 import { withI18n } from "../../i18n/withTranslation.js";
@@ -337,6 +338,84 @@ class CategoryList extends Component {
             </Typography>
           )
         )}
+          <Button
+            component={Link}
+            to="/Konfigurator"
+            color="inherit"
+            size="small"
+            aria-label="Zur Startseite"
+            onClick={isMobile ? this.handleMobileCategoryClick : undefined}
+            sx={{
+              fontSize: "0.75rem",
+              textTransform: "none",
+              whiteSpace: "nowrap",
+              opacity: 0.9,
+              mx: isMobile ? 0 : 0.5,
+              my: 0.25,
+              minWidth: isMobile ? "100%" : "auto",
+              borderRadius: 1,
+              justifyContent: isMobile ? "flex-start" : "center",
+              transition: "all 0.2s ease",
+              textShadow: "0 1px 2px rgba(0,0,0,0.3)",
+              position: "relative",
+              ...(activeCategoryId === null && {
+                bgcolor: "#fff",
+                textShadow: "none",
+                opacity: 1,
+              }),
+              "&:hover": {
+                opacity: 1,
+                bgcolor: "#fff",
+                textShadow: "none",
+                "& .MuiSvgIcon-root": {
+                  color: "#2e7d32 !important",
+                },
+                "& .bold-text": {
+                  color: "#2e7d32 !important",
+                },
+                "& .thin-text": {
+                  color: "transparent !important",
+                },
+              },
+            }}
+          >
+            <SettingsIcon sx={{
+              fontSize: "1rem",
+              mr: isMobile ? 1 : 0,
+              color: activeCategoryId === null ? "#2e7d32" : "inherit"
+            }} />
+            {isMobile && (
+              <Box sx={{ position: "relative", display: "inline-block" }}>
+                {/* Bold text (always rendered to set width) */}
+                <Box
+                  className="bold-text"
+                  sx={{
+                    fontWeight: "bold",
+                    color: activeCategoryId === null ? "#2e7d32" : "transparent",
+                    position: "relative",
+                    zIndex: 2,
+                  }}
+                >
+                  {this.props.t ? this.props.t('navigation.home') : 'Startseite'}
+                </Box>
+                {/* Thin text (positioned on top) */}
+                <Box
+                  className="thin-text"
+                  sx={{
+                    fontWeight: "400",
+                    color: activeCategoryId === null ? "transparent" : "inherit",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    zIndex: 1,
+                  }}
+                >
+                  {this.props.t ? this.props.t('navigation.home') : 'Startseite'}
+                </Box>
+              </Box>
+            )}
+          </Button>
+
       </Box>
     );