feat: Refactor Header and CategoryList components to improve category navigation handling and enhance active state management based on pathname

2026-03-25 11:17:24 +01:00
parent 91388244d8
commit 5515a59fa1
2 changed files with 87 additions and 24 deletions
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -91,7 +91,9 @@ class Header extends Component {
            </Box>
          </Container>
        </Toolbar>
-        {(isHomePage || this.props.categoryId || isProfilePage || isAktionenPage || isFilialePage || this.props.isArtikel) && <CategoryList categoryId={209} activeCategoryId={this.props.categoryId}/>}
+        {(isHomePage || this.props.categoryId || isProfilePage || isAktionenPage || isFilialePage || this.props.isArtikel) && (
+          <CategoryList categoryId={209} activeCategoryId={this.props.categoryId} pathname={this.props.pathname} />
+        )}
      </AppBar>
    );
  }
@@ -107,9 +109,15 @@ const HeaderWithContext = (props) => {
  const isArtikel = location.pathname.startsWith('/Artikel/');

  return (
-
-      <Header {...props} isHomePage={isHomePage} isArtikel={isArtikel} isProfilePage={isProfilePage} isAktionenPage={isAktionenPage} isFilialePage={isFilialePage} />
-
+      <Header
+        {...props}
+        isHomePage={isHomePage}
+        isArtikel={isArtikel}
+        isProfilePage={isProfilePage}
+        isAktionenPage={isAktionenPage}
+        isFilialePage={isFilialePage}
+        pathname={location.pathname}
+      />
  );
 };

--- a/src/components/header/CategoryList.js
+++ b/src/components/header/CategoryList.js
@@ -159,8 +159,23 @@ class CategoryList extends Component {
    }
  }

+  /**
+   * Which nav item should appear active: home, konfigurator, neu, bald, a level-1 category id, or null.
+   * neu/bald are not in the category tree as seoNames, so pathname / explicit props must drive them.
+   * Home vs Konfigurator both had categoryId null from the app; pathname disambiguates.
+   */
+  getNavHighlightKey() {
+    const pathname = this.props.pathname || "";
+    if (pathname === "/") return "home";
+    if (pathname === "/Konfigurator" || pathname.startsWith("/Konfigurator/")) return "konfigurator";
+    if (pathname === "/Kategorie/neu" || this.props.activeCategoryId === "neu") return "neu";
+    if (pathname === "/Kategorie/bald" || this.props.activeCategoryId === "bald") return "bald";
+    return this.state.activeCategoryId;
+  }
+
  render() {
-    const { categories, mobileMenuOpen, activeCategoryId } = this.state;
+    const { categories, mobileMenuOpen } = this.state;
+    const navKey = this.getNavHighlightKey();

    const renderCategoryRow = (categories, isMobile = false) => (
      <Box
@@ -194,7 +209,7 @@ class CategoryList extends Component {
            transition: "all 0.2s ease",
            textShadow: "0 1px 2px rgba(0,0,0,0.3)",
            position: "relative",
-            ...(activeCategoryId === null && {
+            ...(navKey === "home" && {
              bgcolor: "#fff",
              textShadow: "none",
              opacity: 1,
@@ -218,7 +233,7 @@ class CategoryList extends Component {
          <HomeIcon sx={{
            fontSize: "1rem",
            mr: isMobile ? 1 : 0,
-            color: activeCategoryId === null ? "#2e7d32" : "inherit"
+            color: navKey === "home" ? "#2e7d32" : "inherit"
          }} />
          {isMobile && (
            <Box sx={{ position: "relative", display: "inline-block" }}>
@@ -227,7 +242,7 @@ class CategoryList extends Component {
                className="bold-text"
                sx={{
                  fontWeight: "bold",
-                  color: activeCategoryId === null ? "#2e7d32" : "transparent",
+                  color: navKey === "home" ? "#2e7d32" : "transparent",
                  position: "relative",
                  zIndex: 2,
                }}
@@ -239,7 +254,7 @@ class CategoryList extends Component {
                className="thin-text"
                sx={{
                  fontWeight: "400",
-                  color: activeCategoryId === null ? "transparent" : "inherit",
+                  color: navKey === "home" ? "transparent" : "inherit",
                  position: "absolute",
                  top: 0,
                  left: 0,
@@ -271,12 +286,32 @@ class CategoryList extends Component {
            justifyContent: isMobile ? "flex-start" : "center",
            transition: "all 0.2s ease",
            textShadow: "0 1px 2px rgba(0,0,0,0.3)",
-            position: "relative"
+            position: "relative",
+            ...(navKey === "neu" && {
+              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",
+              },
+            },
          }}
        >
          <FiberNewIcon sx={{
            fontSize: "1rem",
-            mr: isMobile ? 1 : 0
+            mr: isMobile ? 1 : 0,
+            color: navKey === "neu" ? "#2e7d32" : "inherit"
          }} />
          {isMobile && (
            <Box sx={{ position: "relative", display: "inline-block" }}>
@@ -285,7 +320,7 @@ class CategoryList extends Component {
                className="bold-text"
                sx={{
                  fontWeight: "bold",
-                  color: "transparent",
+                  color: navKey === "neu" ? "#2e7d32" : "transparent",
                  position: "relative",
                  zIndex: 2,
                }}
@@ -297,7 +332,7 @@ class CategoryList extends Component {
                className="thin-text"
                sx={{
                  fontWeight: "400",
-                  color: "inherit",
+                  color: navKey === "neu" ? "transparent" : "inherit",
                  position: "absolute",
                  top: 0,
                  left: 0,
@@ -329,12 +364,32 @@ class CategoryList extends Component {
            justifyContent: isMobile ? "flex-start" : "center",
            transition: "all 0.2s ease",
            textShadow: "0 1px 2px rgba(0,0,0,0.3)",
-            position: "relative"
+            position: "relative",
+            ...(navKey === "bald" && {
+              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",
+              },
+            },
          }}
        >
          <LocalShippingIcon sx={{
            fontSize: "1rem",
-            mr: isMobile ? 1 : 0
+            mr: isMobile ? 1 : 0,
+            color: navKey === "bald" ? "#2e7d32" : "inherit"
          }} />
          {isMobile && (
            <Box sx={{ position: "relative", display: "inline-block" }}>
@@ -342,7 +397,7 @@ class CategoryList extends Component {
                className="bold-text"
                sx={{
                  fontWeight: "bold",
-                  color: "transparent",
+                  color: navKey === "bald" ? "#2e7d32" : "transparent",
                  position: "relative",
                  zIndex: 2,
                }}
@@ -353,7 +408,7 @@ class CategoryList extends Component {
                className="thin-text"
                sx={{
                  fontWeight: "400",
-                  color: "inherit",
+                  color: navKey === "bald" ? "transparent" : "inherit",
                  position: "absolute",
                  top: 0,
                  left: 0,
@@ -392,7 +447,7 @@ class CategoryList extends Component {
                    transition: "all 0.2s ease",
                    textShadow: "0 1px 2px rgba(0,0,0,0.3)",
                    position: "relative",
-                    ...(activeCategoryId === category.id && {
+                    ...(navKey === category.id && {
                      bgcolor: "#fff",
                      textShadow: "none",
                      opacity: 1,
@@ -416,7 +471,7 @@ class CategoryList extends Component {
                      className="bold-text"
                      sx={{
                        fontWeight: "bold",
-                        color: activeCategoryId === category.id ? "#2e7d32" : "transparent",
+                        color: navKey === category.id ? "#2e7d32" : "transparent",
                        position: "relative",
                        zIndex: 2,
                      }}
@@ -428,7 +483,7 @@ class CategoryList extends Component {
                      className="thin-text"
                      sx={{
                        fontWeight: "400",
-                        color: activeCategoryId === category.id ? "transparent" : "inherit",
+                        color: navKey === category.id ? "transparent" : "inherit",
                        position: "absolute",
                        top: 0,
                        left: 0,
@@ -479,7 +534,7 @@ class CategoryList extends Component {
            transition: "all 0.2s ease",
            textShadow: "0 1px 2px rgba(0,0,0,0.3)",
            position: "relative",
-            ...(activeCategoryId === null && {
+            ...(navKey === "konfigurator" && {
              bgcolor: "#fff",
              textShadow: "none",
              opacity: 1,
@@ -503,7 +558,7 @@ class CategoryList extends Component {
          <SettingsIcon sx={{
            fontSize: "1rem",
            mr: isMobile ? 1 : 0,
-            color: activeCategoryId === null ? "#2e7d32" : "inherit"
+            color: navKey === "konfigurator" ? "#2e7d32" : "inherit"
          }} />
          {isMobile && (
            <Box sx={{ position: "relative", display: "inline-block" }}>
@@ -512,7 +567,7 @@ class CategoryList extends Component {
                className="bold-text"
                sx={{
                  fontWeight: "bold",
-                  color: activeCategoryId === null ? "#2e7d32" : "transparent",
+                  color: navKey === "konfigurator" ? "#2e7d32" : "transparent",
                  position: "relative",
                  zIndex: 2,
                }}
@@ -524,7 +579,7 @@ class CategoryList extends Component {
                className="thin-text"
                sx={{
                  fontWeight: "400",
-                  color: activeCategoryId === null ? "transparent" : "inherit",
+                  color: navKey === "konfigurator" ? "transparent" : "inherit",
                  position: "absolute",
                  top: 0,
                  left: 0,