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

**Commit message:**

Browse Source 
Remove redundant comments and simplify layout logic in MainPageLayout

**Description:**
Deleted unnecessary inline comments and streamlined responsive navigation/content rendering logic. Maintained core functionality while improving code clarity and reducing visual noise in the component structure.
This commit is contained in:
sebseb7
2025-07-27 13:53:40 +02:00
parent 7c78c6d85c
commit c1f2be99a7
1 changed files with 14 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/MainPageLayout.js
View File

@@ -18,12 +18,10 @@ const MainPageLayout = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [starHovered, setStarHovered] = React.useState(false); const [starHovered, setStarHovered] = React.useState(false);
// Determine which page we're on
const isHome = currentPath === "/"; const isHome = currentPath === "/";
const isAktionen = currentPath === "/aktionen"; const isAktionen = currentPath === "/aktionen";
const isFiliale = currentPath === "/filiale"; const isFiliale = currentPath === "/filiale";
// Add CSS animations for rotating stars
React.useEffect(() => { React.useEffect(() => {
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = ` style.textContent = `
@@ -50,13 +48,11 @@ const MainPageLayout = () => {
} }
`; `;
document.head.appendChild(style); document.head.appendChild(style);
return () => { return () => {
document.head.removeChild(style); document.head.removeChild(style);
}; };
}, []); }, []);
// Get navigation config based on current page
const getNavigationConfig = () => { const getNavigationConfig = () => {
if (isHome) { if (isHome) {
return { return {
@@ -83,7 +79,6 @@ const MainPageLayout = () => {
filiale: t('titles.home') filiale: t('titles.home')
}; };
// Define all content boxes for layered rendering
const allContentBoxes = { const allContentBoxes = {
home: [ home: [
{ {
@@ -129,7 +124,6 @@ const MainPageLayout = () => {
] ]
}; };
// Get opacity for each page layer
const getOpacity = (pageType) => { const getOpacity = (pageType) => {
if (pageType === "home" && isHome) return 1; if (pageType === "home" && isHome) return 1;
if (pageType === "aktionen" && isAktionen) return 1; if (pageType === "aktionen" && isAktionen) return 1;
@@ -139,7 +133,6 @@ const MainPageLayout = () => {
const navConfig = getNavigationConfig(); const navConfig = getNavigationConfig();
// Navigation text mapping for translation
const navTexts = [ const navTexts = [
{ key: 'aktionen', text: t('navigation.aktionen'), link: '/aktionen' }, { key: 'aktionen', text: t('navigation.aktionen'), link: '/aktionen' },
{ key: 'filiale', text: t('navigation.filiale'), link: '/filiale' }, { key: 'filiale', text: t('navigation.filiale'), link: '/filiale' },
@@ -149,8 +142,6 @@ const MainPageLayout = () => {
return ( return (
<Container maxWidth="lg" sx={{ py: 2 }}> <Container maxWidth="lg" sx={{ py: 2 }}>
<style>{getCombinedAnimatedBorderStyles(['seeds', 'cutlings'])}</style> <style>{getCombinedAnimatedBorderStyles(['seeds', 'cutlings'])}</style>
{/* Main Navigation Header */}
<Box sx={{ <Box sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@@ -159,13 +150,11 @@ const MainPageLayout = () => {
mt: 2, mt: 2,
px: 0, px: 0,
transition: "all 0.3s ease-in-out", transition: "all 0.3s ease-in-out",
// Portrait phone: stack title above navigation
flexDirection: { flexDirection: {
xs: "column", xs: "column",
sm: "row" sm: "row"
} }
}}> }}>
{/* Title for portrait phones - shown first */}
<Box sx={{ <Box sx={{
display: { xs: "block", sm: "none" }, display: { xs: "block", sm: "none" },
mb: { xs: 2, sm: 0 }, mb: { xs: 2, sm: 0 },
@@ -201,15 +190,12 @@ const MainPageLayout = () => {
</Typography> </Typography>
))} ))}
</Box> </Box>
{/* Navigation container for portrait phones */}
<Box sx={{ <Box sx={{
display: { xs: "flex", sm: "contents" }, display: { xs: "flex", sm: "contents" },
width: { xs: "100%", sm: "auto" }, width: { xs: "100%", sm: "auto" },
justifyContent: { xs: "space-between", sm: "initial" }, justifyContent: { xs: "space-between", sm: "initial" },
alignItems: "center" alignItems: "center"
}}> }}>
{/* Left Navigation - Layered rendering */}
<Box sx={{ <Box sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@@ -221,7 +207,6 @@ const MainPageLayout = () => {
{navTexts.map((navItem, index) => { {navTexts.map((navItem, index) => {
const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text; const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
const link = navItem.link; const link = navItem.link;
return ( return (
<Box <Box
key={navItem.key} key={navItem.key}
@@ -259,8 +244,6 @@ const MainPageLayout = () => {
); );
})} })}
</Box> </Box>
{/* Center Title - Layered rendering - Hidden on portrait phones, shown on larger screens */}
<Box sx={{ <Box sx={{
flex: 1, flex: 1,
display: { xs: "none", sm: "flex" }, display: { xs: "none", sm: "flex" },
@@ -298,8 +281,6 @@ const MainPageLayout = () => {
</Typography> </Typography>
))} ))}
</Box> </Box>
{/* Right Navigation - Layered rendering */}
<Box sx={{ <Box sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@@ -311,7 +292,6 @@ const MainPageLayout = () => {
{navTexts.map((navItem, index) => { {navTexts.map((navItem, index) => {
const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text; const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
const link = navItem.link; const link = navItem.link;
return ( return (
<Box <Box
key={navItem.key} key={navItem.key}
@@ -351,8 +331,6 @@ const MainPageLayout = () => {
</Box> </Box>
</Box> </Box>
</Box> </Box>
{/* Content Boxes - Layered rendering */}
<Box sx={{ position: "relative", mb: 4 }}> <Box sx={{ position: "relative", mb: 4 }}>
{Object.entries(allContentBoxes).map(([pageType, contentBoxes]) => ( {Object.entries(allContentBoxes).map(([pageType, contentBoxes]) => (
<Grid <Grid
@@ -371,7 +349,6 @@ const MainPageLayout = () => {
> >
{contentBoxes.map((box, index) => ( {contentBoxes.map((box, index) => (
<Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}> <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%", position: 'relative' }}>
{/* Multi-pointed star for seeds box - moved to Grid level */}
{index === 0 && pageType === "filiale" && ( {index === 0 && pageType === "filiale" && (
<Box <Box
sx={{ sx={{
@@ -381,15 +358,12 @@ const MainPageLayout = () => {
width: '180px', width: '180px',
height: '180px', height: '180px',
zIndex: 999, zIndex: 999,
pointerEvents: 'auto', pointerEvents: 'none',
cursor: 'pointer', '& *': { pointerEvents: 'none' },
filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.4))', filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.4))',
display: { xs: 'none', sm: 'block' } display: { xs: 'none', sm: 'block' }
}} }}
onMouseEnter={() => setStarHovered(true)}
onMouseLeave={() => setStarHovered(false)}
> >
{/* Background star - slightly larger and rotated */}
<svg <svg
viewBox="0 0 60 60" viewBox="0 0 60 60"
width="168" width="168"
@@ -408,8 +382,6 @@ const MainPageLayout = () => {
stroke="none" stroke="none"
/> />
</svg> </svg>
{/* Middle star - medium size with different rotation */}
<svg <svg
viewBox="0 0 60 60" viewBox="0 0 60 60"
width="159" width="159"
@@ -428,8 +400,6 @@ const MainPageLayout = () => {
stroke="none" stroke="none"
/> />
</svg> </svg>
{/* Foreground star - main star with text */}
<svg <svg
viewBox="0 0 60 60" viewBox="0 0 60 60"
width="150" width="150"
@@ -442,8 +412,6 @@ const MainPageLayout = () => {
stroke="none" stroke="none"
/> />
</svg> </svg>
{/* Text positioned in the center of the star */}
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
@@ -464,8 +432,6 @@ const MainPageLayout = () => {
> >
{t('sections.showUsPhoto')} {t('sections.showUsPhoto')}
</div> </div>
{/* Hover text */}
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
@@ -488,8 +454,6 @@ const MainPageLayout = () => {
</div> </div>
</Box> </Box>
)} )}
{/* Multi-pointed star for stecklinge box - bottom right */}
{index === 1 && pageType === "filiale" && ( {index === 1 && pageType === "filiale" && (
<Box <Box
sx={{ sx={{
@@ -499,13 +463,13 @@ const MainPageLayout = () => {
width: '180px', width: '180px',
height: '180px', height: '180px',
zIndex: 999, zIndex: 999,
pointerEvents: 'auto', pointerEvents: 'none',
cursor: 'pointer', '& *': { pointerEvents: 'none' },
filter: 'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(175, 238, 238, 0.8)) drop-shadow(0 0 40px rgba(175, 238, 238, 0.4))', filter:
'drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(175, 238, 238, 0.8)) drop-shadow(0 0 40px rgba(175, 238, 238, 0.4))',
display: { xs: 'none', sm: 'block' } display: { xs: 'none', sm: 'block' }
}} }}
> >
{/* Background star - slightly larger and rotated */}
<svg <svg
viewBox="0 0 60 60" viewBox="0 0 60 60"
width="168" width="168"
@@ -524,8 +488,6 @@ const MainPageLayout = () => {
stroke="none" stroke="none"
/> />
</svg> </svg>
{/* Middle star - medium size with different rotation */}
<svg <svg
viewBox="0 0 60 60" viewBox="0 0 60 60"
width="159" width="159"
@@ -544,8 +506,6 @@ const MainPageLayout = () => {
stroke="none" stroke="none"
/> />
</svg> </svg>
{/* Foreground star - main star with text */}
<svg <svg
viewBox="0 0 60 60" viewBox="0 0 60 60"
width="150" width="150"
@@ -558,8 +518,6 @@ const MainPageLayout = () => {
stroke="none" stroke="none"
/> />
</svg> </svg>
{/* Text positioned in the center of the star */}
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
@@ -580,7 +538,6 @@ const MainPageLayout = () => {
</div> </div>
</Box> </Box>
)} )}
<div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}> <div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}>
<Paper <Paper
component={Link} component={Link}
@@ -601,6 +558,8 @@ const MainPageLayout = () => {
boxShadow: 20, boxShadow: 20,
}, },
}} }}
onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined}
onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined}
> >
<Box <Box
sx={{ sx={{
@@ -612,7 +571,6 @@ const MainPageLayout = () => {
justifyContent: "center", justifyContent: "center",
}} }}
> >
{/* Image loaded only when needed */}
{getOpacity(pageType) === 1 && ( {getOpacity(pageType) === 1 && (
<img <img
src={box.image} src={box.image}
@@ -656,8 +614,6 @@ const MainPageLayout = () => {
</Grid> </Grid>
))} ))}
</Box> </Box>
{/* Shared Carousel */}
<SharedCarousel /> <SharedCarousel />
</Container> </Container>
); );