How to do it...

Let's say that you're working on an app that has screens for managing different aspects of the CPU, memory, storage, and network. Instead of having a flat list of drawer items, you could display drawer items in their relevant sections, making it easier to navigate. Here's the code to do it:

import React, { useState } from 'react';import { withStyles } from '@material-ui/core/styles';import Drawer from '@material-ui/core/Drawer';import Grid from '@material-ui/core/Grid';import Button from '@material-ui/core/Button';import List from '@material-ui/core/List';import ListItem from '@material-ui/core/ListItem';import ListItemIcon from '@material-ui/core/ListItemIcon';import ListItemText from '@material-ui/core/ListItemText';import ...

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

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.