What is the correct way to use a menu with an AppBar in Material UI

Question

I am a little stuck on this one, probably easy if you know how. The documentation has an example but it doesn't work:

https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/app-bar/MenuAppBar.tsx

https://material-ui.com/components/app-bar/#app-bar-with-menu - this exmaple is incorrect, and acutally shows how to toggle an icon.

Does anyone know the correct components to use, and how to use them?

    <AppBar variant="outlined" position="static">
      <Toolbar>
        <IconButton edge="start" color="inherit" aria-label="menu">
          <MenuIcon />
        </IconButton>
        <Typography variant="h6">
          The title
        </Typography>
      </Toolbar>
    </AppBar>

Answer 1

Posting here, for future user's reference.

If you are looking for a sidebar menu that shows up when a hamburger button is clicked, you could use the Drawer component and structure your AppBar like below.

export default function App() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const classes = useStyles();

  return (
    <AppBar variant="outlined" position="static">
      <Toolbar>
        <IconButton
          edge="start"
          color="inherit"
          aria-label="menu"
          onClick={() => setIsDrawerOpen(true)}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6">The title</Typography>

        <Drawer open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
          <List className={classes.drawer}>
            <ListItem button>
              <ListItemText primary="Home" />
            </ListItem>

            <ListItem button>
              <ListItemText primary="About" />
            </ListItem>

            <ListItem button>
              <ListItemText primary="Contact" />
            </ListItem>

            <ListItem button>
              <ListItemText primary="Services" />
            </ListItem>
          </List>
        </Drawer>
      </Toolbar>
    </AppBar>
  );
}