In one of my projects, I implemented a solution where I set a fixed height for the AppBar and used constants to manage its responsiveness.
- Here is an example of how it was done in AppBar.js:
export const APP_BAR_HEIGHT = 80;
export const APP_BAR_HEIGHT_LG = 140;
const AppBar = () => {
return (
<div style={{ height: isLargeScreen ? APP_BAR_HEIGHT_LG : APP_BAR_HEIGHT}}>
{/* app bar content here */}
</div>
);
}
export default AppBar;
After defining these constants, they were imported and utilized throughout the project.
Further Improvement:
I also created a custom hook to manage window height changes more effectively.
const useWindowHeight = () => {
const [height, setHeight] = React.useState(window.innerHeight);
React.useEffect(() => {
const handleResize = () => {
setHeight(window.innerHeight);
}
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
}
}, []);
return height;
}
This custom hook helped in ensuring accurate height calculations, especially on mobile devices with changing window heights during scrolling. Ultimately, the implementation would look something like this:
import AppBar, { APP_BAR_HEIGHT, APP_BAR_HEIGHT_LG } from 'whateverpath';
// ...
const windowHeight = useWindowHeight();
return (
<>
<AppBar>
//additional code goes here
</AppBar>
<Container sx={{margin: '0px', padding: '0px'}}>
<img src={headerPicture} style={{minHeight: windowHeight - APP_BAR_HEIGHT, maxWidth: '100vw'}}/>
</Container>
</>
)