From 45258ac522db83af9c6d81b1336724102f235e0a Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Wed, 16 Jul 2025 06:26:37 +0200
Subject: [PATCH] Refactor MainPageLayout for improved responsiveness: Updated
 layout to stack title above navigation on portrait phones, adjusted flex
 properties for better alignment, and enhanced navigation rendering for
 different screen sizes, ensuring a more user-friendly experience across
 devices.

---
 src/components/MainPageLayout.js | 262 +++++++++++++++++++------------
 1 file changed, 158 insertions(+), 104 deletions(-)

diff --git a/src/components/MainPageLayout.js b/src/components/MainPageLayout.js
index 4bcb677..e3f185d 100644
--- a/src/components/MainPageLayout.js
+++ b/src/components/MainPageLayout.js
@@ -124,68 +124,24 @@ const MainPageLayout = () => {
         mb: 4,
         mt: 2,
         px: 0,
-        transition: "all 0.3s ease-in-out"
+        transition: "all 0.3s ease-in-out",
+        // Portrait phone: stack title above navigation
+        flexDirection: { 
+          xs: "column", 
+          sm: "row" 
+        },
+        // Portrait phone: center align when stacked
+        alignItems: { 
+          xs: "center", 
+          sm: "center" 
+        }
       }}>
-        {/* Left Navigation - Layered rendering */}
+        {/* Title for portrait phones - shown first */}
         <Box sx={{ 
-          display: "flex", 
-          alignItems: "center", 
-          flexShrink: 0,
-          justifyContent: "flex-start",
-          position: "relative",
-          mr: 2
-        }}>
-          {navTexts.map((navItem, index) => {
-            const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
-            const link = navItem.link;
-            
-            return (
-              <Box
-                key={navItem.key}
-                component={Link}
-                to={link}
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  textDecoration: "none",
-                  color: "inherit",
-                  transition: "all 0.3s ease",
-                  opacity: isActive ? 1 : 0,
-                  position: index === 0 ? "relative" : "absolute",
-                  left: index !== 0 ? 0 : "auto",
-                  pointerEvents: isActive ? "auto" : "none",
-                  "&:hover": {
-                    transform: "translateX(-5px)",
-                    color: "primary.main"
-                  }
-                }}
-              >
-                <ChevronLeft sx={{ fontSize: "2rem", mr: 1 }} />
-                <Typography
-                  sx={{
-                    fontFamily: "SwashingtonCP",
-                    fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
-                    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
-                    lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
-                    whiteSpace: "nowrap"
-                  }}
-                >
-                  {navItem.text}
-                </Typography>
-              </Box>
-            );
-          })}
-        </Box>
-
-        {/* Center Title - Layered rendering - This defines the height for centering */}
-        <Box sx={{ 
-          flex: 1, 
-          display: "flex", 
-          justifyContent: "center",
-          alignItems: "center",
-          px: 0,
-          position: "relative",
-          minWidth: 0
+          display: { xs: "block", sm: "none" },
+          mb: { xs: 2, sm: 0 },
+          width: "100%",
+          textAlign: "center"
         }}>
           {Object.entries(allTitles).map(([pageType, title]) => (
             <Typography
@@ -216,55 +172,153 @@ const MainPageLayout = () => {
           ))}
         </Box>
 
-        {/* Right Navigation - Layered rendering */}
+        {/* Navigation container for portrait phones */}
         <Box sx={{ 
-          display: "flex", 
-          alignItems: "center", 
-          flexShrink: 0,
-          justifyContent: "flex-end",
-          position: "relative",
-          ml: 2
+          display: { xs: "flex", sm: "contents" },
+          width: { xs: "100%", sm: "auto" },
+          justifyContent: { xs: "space-between", sm: "initial" },
+          alignItems: "center"
         }}>
-          {navTexts.map((navItem, index) => {
-            const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
-            const link = navItem.link;
-            
-            return (
-              <Box
-                key={navItem.key}
-                component={Link}
-                to={link}
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  textDecoration: "none",
-                  color: "inherit",
-                  transition: "all 0.3s ease",
-                  opacity: isActive ? 1 : 0,
-                  position: index === 0 ? "relative" : "absolute",
-                  right: index !== 0 ? 0 : "auto",
-                  pointerEvents: isActive ? "auto" : "none",
-                  "&:hover": {
-                    transform: "translateX(5px)",
-                    color: "primary.main"
-                  }
-                }}
-              >
-                <Typography
+          {/* Left Navigation - Layered rendering */}
+          <Box sx={{ 
+            display: "flex", 
+            alignItems: "center", 
+            flexShrink: 0,
+            justifyContent: "flex-start",
+            position: "relative",
+            mr: { xs: 0, sm: 2 }
+          }}>
+            {navTexts.map((navItem, index) => {
+              const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
+              const link = navItem.link;
+              
+              return (
+                <Box
+                  key={navItem.key}
+                  component={Link}
+                  to={link}
                   sx={{
-                    fontFamily: "SwashingtonCP",
-                    fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },  
-                    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
-                    lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
-                    whiteSpace: "nowrap"
+                    display: "flex",
+                    alignItems: "center",
+                    textDecoration: "none",
+                    color: "inherit",
+                    transition: "all 0.3s ease",
+                    opacity: isActive ? 1 : 0,
+                    position: index === 0 ? "relative" : "absolute",
+                    left: index !== 0 ? 0 : "auto",
+                    pointerEvents: isActive ? "auto" : "none",
+                    "&:hover": {
+                      transform: "translateX(-5px)",
+                      color: "primary.main"
+                    }
                   }}
                 >
-                  {navItem.text}
-                </Typography>
-                <ChevronRight sx={{ fontSize: "2rem", ml: 1 }} />
-              </Box>
-            );
-          })}
+                  <ChevronLeft sx={{ fontSize: "2rem", mr: 1 }} />
+                  <Typography
+                    sx={{
+                      fontFamily: "SwashingtonCP",
+                      fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
+                      textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
+                      lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
+                      whiteSpace: "nowrap"
+                    }}
+                  >
+                    {navItem.text}
+                  </Typography>
+                </Box>
+              );
+            })}
+          </Box>
+
+          {/* Center Title - Layered rendering - Hidden on portrait phones, shown on larger screens */}
+          <Box sx={{ 
+            flex: 1, 
+            display: { xs: "none", sm: "flex" },
+            justifyContent: "center",
+            alignItems: "center",
+            px: 0,
+            position: "relative",
+            minWidth: 0
+          }}>
+            {Object.entries(allTitles).map(([pageType, title]) => (
+              <Typography
+                key={pageType}
+                variant="h3"
+                component="h1"
+                sx={{
+                  fontFamily: "SwashingtonCP",
+                  fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" },
+                  textAlign: "center",
+                  color: "primary.main",
+                  textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)",
+                  transition: "opacity 0.5s ease-in-out",
+                  opacity: getOpacity(pageType),
+                  position: pageType === "home" ? "relative" : "absolute",
+                  top: pageType !== "home" ? "50%" : "auto",
+                  left: pageType !== "home" ? "50%" : "auto",
+                  transform: pageType !== "home" ? "translate(-50%, -50%)" : "none",
+                  width: "100%",
+                  pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
+                  lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
+                  wordWrap: "break-word",
+                  hyphens: "auto"
+                }}
+              >
+                {title}
+              </Typography>
+            ))}
+          </Box>
+
+          {/* Right Navigation - Layered rendering */}
+          <Box sx={{ 
+            display: "flex", 
+            alignItems: "center", 
+            flexShrink: 0,
+            justifyContent: "flex-end",
+            position: "relative",
+            ml: { xs: 0, sm: 2 }
+          }}>
+            {navTexts.map((navItem, index) => {
+              const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
+              const link = navItem.link;
+              
+              return (
+                <Box
+                  key={navItem.key}
+                  component={Link}
+                  to={link}
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    textDecoration: "none",
+                    color: "inherit",
+                    transition: "all 0.3s ease",
+                    opacity: isActive ? 1 : 0,
+                    position: index === 0 ? "relative" : "absolute",
+                    right: index !== 0 ? 0 : "auto",
+                    pointerEvents: isActive ? "auto" : "none",
+                    "&:hover": {
+                      transform: "translateX(5px)",
+                      color: "primary.main"
+                    }
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      fontFamily: "SwashingtonCP",
+                      fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },  
+                      textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
+                      lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
+                      whiteSpace: "nowrap"
+                    }}
+                  >
+                    {navItem.text}
+                  </Typography>
+                  <ChevronRight sx={{ fontSize: "2rem", ml: 1 }} />
+                </Box>
+              );
+            })}
+          </Box>
         </Box>
       </Box>