There's more...

What if you want the flexibility of having a persistent drawer that can be toggled using the same menu button in the App bar? Let's add a variant property to the AppBarInteraction component that is passed to MyDrawer. This can be changed from temporary to persistent and the menu button will still work as expected.

Here's what a persistent drawer looks like when you click on the menu button:

The drawer overlaps the App bar. Another problem is that if you click on any of the drawer items, the drawer is closed, which isn't ideal for a persistent drawer. Let's fix both of these issues.

First, let's address the z-index issue that's ...

Get React Material-UI Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.