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

feat: update layout in PrerenderProduct to match SPA design with invisible placeholders for SearchBar and ButtonGroup

Browse Source
This commit is contained in:
sebseb7
2025-07-20 12:00:11 +02:00
parent 3d136775e2
commit 275ee3bea6
1 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/PrerenderProduct.js
View File

@@ -75,8 +75,8 @@ class PrerenderProduct extends React.Component {
Toolbar,
{ sx: { minHeight: 64, py: { xs: 0.5, sm: 0 } } },
React.createElement(
Box,
{ sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 }, maxWidth: { xs: 'none', sm: '1200px' }, mx: { xs: 0, sm: 'auto' }, width: '100%' } },
Container,
{ maxWidth: 'lg', sx: { display: 'flex', alignItems: 'center', px: { xs: 0, sm: 3 } } },
// Desktop: simple layout, Mobile: column layout with SearchBar space
React.createElement(
Box,
@@ -88,7 +88,7 @@ class PrerenderProduct extends React.Component {
flexDirection: { xs: 'column', sm: 'row' }
}
},
// First row: Logo (and ButtonGroup on mobile in SPA, but we don't need ButtonGroup in prerender)
// First row: Logo and invisible placeholders to match SPA layout
React.createElement(
Box,
{
@@ -96,12 +96,40 @@ class PrerenderProduct extends React.Component {
display: 'flex',
alignItems: 'center',
width: '100%',
justifyContent: { xs: 'flex-start', sm: 'flex-start' }, // Keep desktop simple
justifyContent: { xs: 'space-between', sm: 'flex-start' }, // Match SPA layout
minHeight: { xs: 52, sm: 'auto' },
px: { xs: 0, sm: 0 }
}
},
React.createElement(Logo)
React.createElement(Logo),
// Invisible SearchBar placeholder on desktop to match SPA spacing
React.createElement(
Box,
{
sx: {
display: { xs: 'none', sm: 'block' },
flexGrow: 1,
mx: { xs: 0, sm: 2, md: 4 },
visibility: 'hidden',
height: 40 // Match SearchBar height
}
}
),
// Invisible ButtonGroup placeholder to match SPA spacing
React.createElement(
Box,
{
sx: {
display: { xs: 'flex', sm: 'flex' },
alignItems: { xs: 'flex-end', sm: 'center' },
transform: { xs: 'translateY(4px) translateX(9px)', sm: 'none' },
ml: { xs: 0, sm: 0 },
visibility: 'hidden',
width: { xs: 'auto', sm: '120px' }, // Approximate ButtonGroup width
height: 40
}
}
)
),
// Second row: SearchBar placeholder only on mobile
React.createElement(