title: Is there a way to show a Material-UI Drawer nested inside a Grid component?
body: <p>I'm creating a web application using Material-UI. The main page is divided in 3 grids, each with a <code>height</code> of <code>500px</code>. I wanted to display a drawer with some options of actions inside the middle grid. Is that possible? The way I have it so far I can only display it in relation to the whole screen.</p>
  
  <p>Here's my main component with the grid elements:</p>
  
  <pre><code>import React, { Fragment } from 'react';
  import Grid from '@material-ui/core/Grid';
  import Paper from '@material-ui/core/Paper';
  
  const style = {
      Paper: {
          padding: 10,
          marginTop: 5,
          marginBottom: 5,
          height: 500,
          overflowY: 'auto',
          position: 'relative',
      },
      Fab: {
          position: 'absolute',
          top: 5,
          left: 5
      },
  }
  
  export default () =&gt; {
      return (
          &lt;Fragment&gt;
              &lt;Grid container spacing={1}&gt;
                  &lt;Grid item xs={12} sm={4} md={4} lg={2}&gt;
                      &lt;Paper style={style.Paper}&gt;
  
                      &lt;/Paper&gt;
                  &lt;/Grid&gt;
  
                  &lt;Grid item xs={12} sm={8} md={8} lg={4}&gt;
                      &lt;Paper style={style.Paper}&gt;
                          &lt;ToolbarDrawer /&gt;
                      &lt;/Paper&gt;
                  &lt;/Grid&gt;
  
                  &lt;Grid item xs={12} sm={12} md={12} lg={6}&gt;
                      &lt;Paper style={style.Paper}&gt;
  
                      &lt;/Paper&gt;
                  &lt;/Grid&gt;
              &lt;/Grid&gt;
          &lt;/Fragment&gt;
      );
  }
  </code></pre>
  
  <p>Here's my drawer component which I would like to be displayed nested inside the middle grid:</p>
  
  <pre><code>javascript
  
  import React, { Fragment } from 'react';
  import IconButton from '@material-ui/core/IconButton';
  import ChevronRightIcon from '@material-ui/icons/ChevronRight';
  import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
  import InboxIcon from '@material-ui/icons/MoveToInbox';
  import MailIcon from '@material-ui/icons/Mail';
  import { makeStyles } from '@material-ui/core/styles';
  import clsx from 'clsx';
  import Drawer from '@material-ui/core/Drawer';
  import Divider from '@material-ui/core/Divider';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemIcon from '@material-ui/core/ListItemIcon';
  import ListItemText from '@material-ui/core/ListItemText';
  import List from '@material-ui/core/List';
  import CssBaseline from '@material-ui/core/CssBaseline';
  
  const drawerWidth = 240;
  
  const useStyles = makeStyles(theme =&gt; ({
    drawer: {
      width: drawerWidth,
      flexShrink: 0,
      whiteSpace: 'nowrap',
    },
    drawerOpen: {
      width: drawerWidth,
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    drawerClose: {
      transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
      overflowX: 'hidden',
      width: theme.spacing(6) + 1,
      [theme.breakpoints.up('sm')]: {
        width: theme.spacing(7) + 1,
      },
    },
    toolbar: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'flex-end',
      padding: theme.spacing(0, 1),
      ...theme.mixins.toolbar,
    }
  }));
  
  export default () =&gt; {
      const classes = useStyles();
  
      const [open, setOpen] = React.useState(false);
  
      function handleToolbarClose() {
          setOpen(!open);
      }
  
      return (
              &lt;Fragment&gt;
                  &lt;CssBaseline /&gt;
                  &lt;Drawer
                      anchor="right"
                      variant="permanent"
                      className={clsx(classes.drawer, {
                        [classes.drawerOpen]: open,
                        [classes.drawerClose]: !open,
                      })}
                      classes={{
                        paper: clsx({
                          [classes.drawerOpen]: open,
                          [classes.drawerClose]: !open,
                        }),
                      }}
                      open={open}
                  &gt;
                      &lt;div className={classes.toolbar}&gt;
                        &lt;IconButton onClick={handleToolbarClose}&gt;
                          {(open) ? &lt;ChevronRightIcon /&gt; : &lt;ChevronLeftIcon /&gt;}
                        &lt;/IconButton&gt;
                      &lt;/div&gt;
                      &lt;Divider /&gt;
                      &lt;List&gt;
                        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) =&gt; (
                          &lt;ListItem button key={text}&gt;
                            &lt;ListItemIcon&gt;{index % 2 === 0 ? &lt;InboxIcon /&gt; : &lt;MailIcon /&gt;}&lt;/ListItemIcon&gt;
                            &lt;ListItemText primary={text} /&gt;
                          &lt;/ListItem&gt;
                        ))}
                      &lt;/List&gt;
                      &lt;Divider /&gt;
                      &lt;List&gt;
                        {['All mail', 'Trash', 'Spam'].map((text, index) =&gt; (
                          &lt;ListItem button key={text}&gt;
                            &lt;ListItemIcon&gt;{index % 2 === 0 ? &lt;InboxIcon /&gt; : &lt;MailIcon /&gt;}&lt;/ListItemIcon&gt;
                            &lt;ListItemText primary={text} /&gt;
                          &lt;/ListItem&gt;
                        ))}
                      &lt;/List&gt;
                  &lt;/Drawer&gt;
  
              &lt;/Fragment&gt;
          )   
  }
  </code></pre>