seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

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

Browse Source
This commit is contained in:
sebseb7
2026-03-25 11:17:24 +01:00
parent 91388244d8
commit 5515a59fa1
2 changed files with 87 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Header.js
View File

@@ -91,7 +91,9 @@ class Header extends Component {
</Box> </Box>
</Container> </Container>
</Toolbar> </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> </AppBar>
); );
} }
@@ -107,9 +109,15 @@ const HeaderWithContext = (props) => {
const isArtikel = location.pathname.startsWith('/Artikel/'); const isArtikel = location.pathname.startsWith('/Artikel/');
return ( return (
<Header
<Header {...props} isHomePage={isHomePage} isArtikel={isArtikel} isProfilePage={isProfilePage} isAktionenPage={isAktionenPage} isFilialePage={isFilialePage} /> {...props}
isHomePage={isHomePage}
isArtikel={isArtikel}
isProfilePage={isProfilePage}
isAktionenPage={isAktionenPage}
isFilialePage={isFilialePage}
pathname={location.pathname}
/>
); );
}; };

95
src/components/header/CategoryList.js
View File

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