When using the Material UI permanent drawer component in different pages, I encountered an issue where the main content was getting hidden behind the drawer's toolbar and sidebar.
I am unsure how to fix this problem. It seems like a styling issue, but I am unable to resolve it. How can I ensure that all content in the main section is visible and not obscured by the drawer?
For the drawer component, here is the code snippet:
const drawerWidth = 240;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
},
appBar: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
// Remaining styles and components...
}),
);
// NewPage component calling the drawer:
const NewPage = () => (
<div>
<PermanentDrawerLeft></PermanentDrawerLeft>
<main className='content'>
<Typography paragraph>
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper eget nulla
facilisi etiam dignissim diam. Pulvinar elementum integer enim neque volutpat ac
tincidunt. Ornare suspendisse sed nisi lacus sed viverra tellus. Purus sit amet erra.
</Typography>
</main>
</div>
);
export default NewPage;
The styling I attempted to add to the NewPage did not resolve the issue:
.content{
padding-top: 1000;
padding-left: 1000;
}