64bf798843
- Updated PrerenderHome component to improve layout responsiveness with additional padding and margin adjustments. - Added invisible placeholders for SearchBar and ButtonGroup to maintain layout consistency across different screen sizes. - Enhanced styling for child components to ensure proper alignment and spacing in both mobile and desktop views.
130 lines
4.0 KiB
JavaScript
130 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Box,
|
|
AppBar,
|
|
Toolbar,
|
|
Container
|
|
} from '@mui/material';
|
|
import Footer from './components/Footer.js';
|
|
import { Logo, CategoryList } from './components/header/index.js';
|
|
|
|
|
|
class PrerenderHome extends React.Component {
|
|
render() {
|
|
return React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
minHeight: '100vh',
|
|
mb: 0,
|
|
pb: 0,
|
|
bgcolor: 'background.default'
|
|
}
|
|
},
|
|
React.createElement(
|
|
AppBar,
|
|
{ position: 'sticky', color: 'primary', elevation: 0, sx: { zIndex: 1100 } },
|
|
React.createElement(
|
|
Toolbar,
|
|
{ sx: { minHeight: 64, py: { xs: 0.5, sm: 0 } } },
|
|
React.createElement(
|
|
Container,
|
|
{ maxWidth: 'lg', sx: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
px: { xs: 0, sm: 3 }
|
|
} },
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
flexDirection: { xs: 'column', sm: 'row' }
|
|
}
|
|
},
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
justifyContent: { xs: 'space-between', sm: 'flex-start' },
|
|
minHeight: { xs: 52, sm: 'auto' },
|
|
px: { xs: 0, sm: 0 }
|
|
}
|
|
},
|
|
React.createElement(Logo),
|
|
// Invisible SearchBar placeholder on desktop
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: { xs: 'none', sm: 'block' },
|
|
flexGrow: 1,
|
|
height: 41, // Reserve space for SearchBar
|
|
opacity: 0 // Invisible placeholder
|
|
}
|
|
}
|
|
),
|
|
// Invisible ButtonGroup placeholder
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: 'flex',
|
|
alignItems: { xs: 'flex-end', sm: 'center' },
|
|
transform: { xs: 'translateY(4px) translateX(9px)', sm: 'none' },
|
|
ml: { xs: 0, sm: 0 },
|
|
gap: { xs: 0.5, sm: 1 },
|
|
opacity: 0 // Invisible placeholder
|
|
}
|
|
},
|
|
// Placeholder for LanguageSwitcher (approx width)
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { width: 40, height: 40 } }
|
|
),
|
|
// Placeholder for LoginComponent (approx width)
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { width: 40, height: 40 } }
|
|
),
|
|
// Placeholder for Cart button (approx width)
|
|
React.createElement(
|
|
Box,
|
|
{ sx: { width: 48, height: 40, ml: 1 } }
|
|
)
|
|
)
|
|
),
|
|
|
|
// Invisible SearchBar placeholder on mobile
|
|
React.createElement(
|
|
Box,
|
|
{
|
|
sx: {
|
|
display: { xs: 'block', sm: 'none' },
|
|
width: '100%',
|
|
mt: { xs: 1, sm: 0 },
|
|
mb: { xs: 0.5, sm: 0 },
|
|
px: { xs: 0, sm: 0 },
|
|
height: 41, // Reserve space for SearchBar
|
|
opacity: 0 // Invisible placeholder
|
|
}
|
|
}
|
|
)
|
|
)
|
|
)
|
|
),
|
|
React.createElement(CategoryList, { categoryId: 209, activeCategoryId: null })
|
|
),
|
|
React.createElement(Footer)
|
|
);
|
|
}
|
|
}
|
|
|
|
export default PrerenderHome;
|