From c1f2be99a73fd9ccd6849f2b6af7eb33831e9d1b Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Sun, 27 Jul 2025 13:53:40 +0200 Subject: [PATCH] **Commit message:** 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. --- src/components/MainPageLayout.js | 72 +++++++------------------------- 1 file changed, 14 insertions(+), 58 deletions(-) diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js index beb45e3..8ff7baa 100644 --- a/src/components/MainPageLayout.js +++ b/src/components/MainPageLayout.js @@ -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 ( - - {/* Main Navigation Header */} { 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 */} { ))} - - {/* Navigation container for portrait phones */} - {/* Left Navigation - Layered rendering */} { {navTexts.map((navItem, index) => { const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text; const link = navItem.link; - return ( { ); })} - - {/* Center Title - Layered rendering - Hidden on portrait phones, shown on larger screens */} { ))} - - {/* Right Navigation - Layered rendering */} { {navTexts.map((navItem, index) => { const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text; const link = navItem.link; - return ( { - - {/* Content Boxes - Layered rendering */} {Object.entries(allContentBoxes).map(([pageType, contentBoxes]) => ( { > {contentBoxes.map((box, index) => ( - {/* Multi-pointed star for seeds box - moved to Grid level */} {index === 0 && pageType === "filiale" && ( { 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 */} { stroke="none" /> - - {/* Middle star - medium size with different rotation */} { stroke="none" /> - - {/* Foreground star - main star with text */} { stroke="none" /> - - {/* Text positioned in the center of the star */}
{ > {t('sections.showUsPhoto')}
- - {/* Hover text */}
{
)} - - {/* Multi-pointed star for stecklinge box - bottom right */} {index === 1 && pageType === "filiale" && ( { 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 */} - { stroke="none" /> - - {/* Middle star - medium size with different rotation */} { stroke="none" /> - - {/* Foreground star - main star with text */} - @@ -558,8 +518,6 @@ const MainPageLayout = () => { stroke="none" /> - - {/* Text positioned in the center of the star */}
{
)} -
{ boxShadow: 20, }, }} + onMouseEnter={index === 0 && pageType === "filiale" ? () => setStarHovered(true) : undefined} + onMouseLeave={index === 0 && pageType === "filiale" ? () => setStarHovered(false) : undefined} > { justifyContent: "center", }} > - {/* Image loaded only when needed */} {getOpacity(pageType) === 1 && ( { ))} - - {/* Shared Carousel */} );