Content Hiding Behind Drawer Navigator

Question

I am using Material UI permanent drawer as a component. I am calling the component in different pages where I am also adding the main content. However, my main content is hiding behind the drawer's toolbar and sidebar.

How can I fix it? It probably needs some styling but I can't figure it out. How can I wrap it in a was that all of it is visible in the main section? Code For the drawer component:

const drawerWidth = 240;

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      display: 'flex',
    },
    appBar: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
    },
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
    },
    drawerPaper: {
      width: drawerWidth,
    },

    panelheaderRight:{
        marginRight: 0,
        right: 0,
    },
    toolbar: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing(3),
    },
  }),
);
const icons = [<HomeIcon/>,<MailIcon/>,<LocalTaxiIcon/>,<PeopleIcon/>]
const icons2 = [<RoomIcon/>,<LocalTaxiIcon/>,<PeopleIcon/>]

export default function PermanentDrawerLeft() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="fixed" className={classes.appBar}>
        <Toolbar>
          <Typography variant="h6" noWrap>
            Admin Panel
          </Typography>
          <NotificationsIcon className='panelheaderRight'/>
          <ExitToAppIcon className='panelheaderRight'/>
        </Toolbar>
      </AppBar>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >
        <div className={classes.toolbar} />
        <Divider />
        <List>
          {['Home','Inbox', 'Rides', 'Users'].map((text, index) => (
            <ListItem button key={text}>
              <ListItemIcon>{icons[index]}</ListItemIcon>
              <ListItemText primary={text} />
            </ListItem>
          ))}
        </List>
      </Drawer>
    </div>
  );
}

Code For Page where I am 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;

I tried adding this styling to my NewPage but it makes no difference:

.content{
    padding-top: 1000;
    padding-left: 1000;
}

Answer 1

pay attention to the layout in the example. (i guess you based it on - https://material-ui.com/components/drawers/#responsive-drawer )

the drawer is set in a <nav className={classes.drawer} aria-label="mailbox folders"> witch sets a reference to the flex layout. and on the start of the main content there's a <div className={classes.toolbar} /> witch sets a space before the main content so the AppBar won't hide it.

use inspect on the Material example and on yours and compare the difference.