From 5515a59fa1563e6289d00b72826086f297f9845d Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Wed, 25 Mar 2026 11:17:24 +0100 Subject: [PATCH] feat: Refactor Header and CategoryList components to improve category navigation handling and enhance active state management based on pathname --- src/components/Header.js | 16 +++-- src/components/header/CategoryList.js | 95 +++++++++++++++++++++------ 2 files changed, 87 insertions(+), 24 deletions(-) diff --git a/src/components/Header.js b/src/components/Header.js index 84b4231..ef8ad18 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -91,7 +91,9 @@ class Header extends Component { - {(isHomePage || this.props.categoryId || isProfilePage || isAktionenPage || isFilialePage || this.props.isArtikel) && } + {(isHomePage || this.props.categoryId || isProfilePage || isAktionenPage || isFilialePage || this.props.isArtikel) && ( + + )} ); } @@ -107,9 +109,15 @@ const HeaderWithContext = (props) => { const isArtikel = location.pathname.startsWith('/Artikel/'); return ( - -
- +
); }; diff --git a/src/components/header/CategoryList.js b/src/components/header/CategoryList.js index 04df62e..6a88e7e 100644 --- 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) => ( {isMobile && ( @@ -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", + }, + }, }} > {isMobile && ( @@ -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", + }, + }, }} > {isMobile && ( @@ -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 { {isMobile && ( @@ -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,