title: the drawer covers the page
body: <p>my drawer is covering the page i want it to be flex to the left without covering any content. this is my first time  using material-ui so if anyone can explain i would appreciate that</p>
  <pre><code>const drawerWidth = 240;
  
  const SideBar = (props) =&gt; {
    const useStyles = makeStyles((theme) =&gt; ({
      root: { display: &quot;flex&quot; },
    }));
    const classes = useStyles();
    return (
      &lt;div&gt;
        &lt;Drawer
          sx={{
            width: drawerWidth,
            flexShrink: 0,
            &quot;&amp; .MuiDrawer-paper&quot;: {
              width: drawerWidth,
              boxSizing: &quot;border-box&quot;,
            },
          }}
          variant=&quot;permanent&quot;
          anchor=&quot;left&quot;
        &gt;
          &lt;Toolbar /&gt;
  
          &lt;List&gt;
            &lt;Divider /&gt;
            {props.jobs.map((job, i) =&gt; (
              &lt;ListItem
                alignItems=&quot;flex-start&quot;
                key={i}
                onClick={() =&gt; {
                  props.onClick(job);
                }}
              &gt;
                &lt;ListItemText primary={job.title} secondary={job.career_level} /&gt;
              &lt;/ListItem&gt;
            ))}
          &lt;/List&gt;
        &lt;/Drawer&gt;
      &lt;/div&gt;````
  </code></pre>