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.
This commit is contained in:
sebseb7
@@ -124,68 +124,24 @@ const MainPageLayout = () => {
|
|||||||
mb: 4,
|
mb: 4,
|
||||||
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: {
|
||||||
|
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={{
|
<Box sx={{
|
||||||
display: "flex",
|
display: { xs: "block", sm: "none" },
|
||||||
alignItems: "center",
|
mb: { xs: 2, sm: 0 },
|
||||||
flexShrink: 0,
|
width: "100%",
|
||||||
justifyContent: "flex-start",
|
textAlign: "center"
|
||||||
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
|
|
||||||
}}>
|
}}>
|
||||||
{Object.entries(allTitles).map(([pageType, title]) => (
|
{Object.entries(allTitles).map(([pageType, title]) => (
|
||||||
<Typography
|
<Typography
|
||||||
@@ -216,55 +172,153 @@ const MainPageLayout = () => {
|
|||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Right Navigation - Layered rendering */}
|
{/* Navigation container for portrait phones */}
|
||||||
<Box sx={{
|
<Box sx={{
|
||||||
display: "flex",
|
display: { xs: "flex", sm: "contents" },
|
||||||
alignItems: "center",
|
width: { xs: "100%", sm: "auto" },
|
||||||
flexShrink: 0,
|
justifyContent: { xs: "space-between", sm: "initial" },
|
||||||
justifyContent: "flex-end",
|
alignItems: "center"
|
||||||
position: "relative",
|
|
||||||
ml: 2
|
|
||||||
}}>
|
}}>
|
||||||
{navTexts.map((navItem, index) => {
|
{/* Left Navigation - Layered rendering */}
|
||||||
const isActive = navConfig.rightNav && navConfig.rightNav.text === navItem.text;
|
<Box sx={{
|
||||||
const link = navItem.link;
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
return (
|
flexShrink: 0,
|
||||||
<Box
|
justifyContent: "flex-start",
|
||||||
key={navItem.key}
|
position: "relative",
|
||||||
component={Link}
|
mr: { xs: 0, sm: 2 }
|
||||||
to={link}
|
}}>
|
||||||
sx={{
|
{navTexts.map((navItem, index) => {
|
||||||
display: "flex",
|
const isActive = navConfig.leftNav && navConfig.leftNav.text === navItem.text;
|
||||||
alignItems: "center",
|
const link = navItem.link;
|
||||||
textDecoration: "none",
|
|
||||||
color: "inherit",
|
return (
|
||||||
transition: "all 0.3s ease",
|
<Box
|
||||||
opacity: isActive ? 1 : 0,
|
key={navItem.key}
|
||||||
position: index === 0 ? "relative" : "absolute",
|
component={Link}
|
||||||
right: index !== 0 ? 0 : "auto",
|
to={link}
|
||||||
pointerEvents: isActive ? "auto" : "none",
|
|
||||||
"&:hover": {
|
|
||||||
transform: "translateX(5px)",
|
|
||||||
color: "primary.main"
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "SwashingtonCP",
|
display: "flex",
|
||||||
fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
|
alignItems: "center",
|
||||||
textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
|
textDecoration: "none",
|
||||||
lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
|
color: "inherit",
|
||||||
whiteSpace: "nowrap"
|
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}
|
<ChevronLeft sx={{ fontSize: "2rem", mr: 1 }} />
|
||||||
</Typography>
|
<Typography
|
||||||
<ChevronRight sx={{ fontSize: "2rem", ml: 1 }} />
|
sx={{
|
||||||
</Box>
|
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>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user