feat: Refactor Header and CategoryList components to improve category navigation handling and enhance active state management based on pathname
This commit is contained in:
sebseb7
@@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user