Открытие ящика из кнопки в заголовке (React.js & Material.ui)

Question

Это мой первый пост / вопрос, и дело в том, что я практикую некоторую навигацию для реализации на моем текущем веб-сайте (который сделан с темой WordPress), поэтому я пытаюсь использовать React, Material.ui и т. Д. Я «персонализировал» некоторые примеры, показанные в API Material.ui, и в заголовке есть приятная кнопка для отображения ящика, но не ящика, поэтому я использовал пример ящика из их API, но я очень неопытен и могу• выяснить, как реализовать функцию , выполненную в файле ящика , в кнопке из файла header / AppBar . Это код из заголовка :

function Header() {
  const classes = useStyles();

  const [anchorEl, setAnchorEl] = React.useState(null);
  const [gastroAnchorEl, setGastroAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);
  const isGastroOpen = Boolean(gastroAnchorEl);

  //-------------------------------------------------

  const handleProfileMenuOpen = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  //-------------------------------------------------

  const handleGastronomyMenuOpen = event => {
    setGastroAnchorEl(event.currentTarget);
  };

  const handleGastronomyMenuClose = () => {
    setGastroAnchorEl(null);
  };

  //-------------------------------------------------

  const menuId = 'menu-cuenta-primario';
  const renderMenu = (
    <Menu
      anchorEl={anchorEl}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      id={menuId}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      open={isMenuOpen}
      onClose={handleMenuClose}
    >
      <MenuItem onClick={handleMenuClose}>
        <ListItemIcon>
          <AccountCircle />
        </ListItemIcon>
        <Typography variant="inherit">Ingresar</Typography>
      </MenuItem>
      <MenuItem onClick={handleMenuClose}>
        <ListItemIcon>
          <LockOpenIcon />
        </ListItemIcon>
        <Typography variant="inherit">Creá tu cuenta</Typography>
      </MenuItem>
    </Menu>
  );

  const renderGastro = (
    <Menu
      anchorEl={gastroAnchorEl}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      keepMounted
      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      open={isGastroOpen}
      onClose={handleGastronomyMenuClose}
    >
      <MenuItem onClick={handleGastronomyMenuClose}>Restaurantes</MenuItem>
      <MenuItem onClick={handleGastronomyMenuClose}>Parrilladas</MenuItem>
      <MenuItem onClick={handleGastronomyMenuClose}>Bares y Pubs</MenuItem>
    </Menu>
  );

  return (
    <div className={classes.grow}>
      <AppBar position="static" className={classes.appBarBackground}>
        <Toolbar>
          <IconButton edge="start" color="inherit" className={classes.menuButton}>
            <MenuIcon />
          </IconButton>
          <Button className={classes.logoButton}>
            <img src={logoDirnoa} className={classes.logo} alt="Dirnoa" />
          </Button>
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase placeholder="¿Buscás algo?"
              classes={{ root: classes.inputRoot, input: classes.inputInput }} />
          </div>
          <div className={classes.grow} />
          <div className={classes.sectionDesktop}>
            <div className="botonera-izquierda">
              <Button color="inherit" className={classes.buttonLeft} onClick={handleGastronomyMenuOpen}>
                Gastronomía
            </Button>
              <Button color="inherit" className={classes.buttonLeft}>
                Blog de viajes
            </Button>
              <Button color="inherit" className={classes.buttonLeft}>
                Contacto
            </Button>
            </div>
            <div className="botonera-derecha">
              <Button color="inherit" className={classes.buttonIngresar}>
                Ingresar
              </Button>
              <Button color="inherit" variant="outlined" className={classes.buttonRegistrar}>
                Creá tu cuenta
              </Button>
            </div>
          </div>
          <div className={classes.sectionMobile}>
            <IconButton color="inherit" onClick={handleProfileMenuOpen}>
              <AccountCircle />
            </IconButton>
          </div>
        </Toolbar>
      </AppBar>
      {renderMenu}
      {renderGastro}
    </div>
  );
}

export default Header;

А это код из ящика :

export default function TemporaryDrawer() {
    const classes = useStyles();
    const [state, setState] = React.useState({
        left: false,
    });

    const toggleDrawer = (side, open) => event => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setState({ ...state, [side]: open });
    };

    const sideList = side => (
        <div
            className={classes.list}
            role="presentation"
            onClick={toggleDrawer(side, false)}
            onKeyDown={toggleDrawer(side, false)}
        >
            <List className={classes.listaPiola}>
                <img src={logoDirnoa} className={classes.logo} alt="Dirnoa" />
            </List>
            <Divider />
            <List>
                <ListItem button>
                    <ListItemIcon><FastfoodIcon /></ListItemIcon>
                    <ListItemText>Gastronomía</ListItemText>
                </ListItem>
                <ListItem button>
                    <ListItemIcon><CardTravelIcon /></ListItemIcon>
                    <ListItemText>Blog de viajes</ListItemText>
                </ListItem>
                <ListItem button>
                    <ListItemIcon><ContactMailIcon /></ListItemIcon>
                    <ListItemText>Contacto</ListItemText>
                </ListItem>
            </List>
            <Divider />
            <List>
                <ListItem button>
                    <ListItemIcon><AccountCircleIcon /></ListItemIcon>
                    <ListItemText>Ingresar</ListItemText>
                </ListItem>
                <ListItem button>
                    <ListItemIcon><LockOpenIcon /></ListItemIcon>
                    <ListItemText>Creá tu cuenta</ListItemText>
                </ListItem>
            </List>
        </div>
    );

    return (
        <div>
            <Button onClick={toggleDrawer('left', true)}>Open Left</Button>
            <Drawer open={state.left} onClose={toggleDrawer('left', false)}>
                {sideList('left')}
            </Drawer>
        </div>
    );
}

Надеюсь, кто-нибудьможете помочь мне с этим, я буду исследовать. Привет!