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

72
src/components/MainPageLayout.js
View File

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