Once we have an idea of how the layout of our application is going to look and work, we can start to think about the navigation. This is an important piece of our UI because it's how the user gets around the application and it will be used frequently. In this section, we'll learn about two of the navigational components offered by Material-UI.
Navigating with drawers
The Drawer component, just like a physical drawer, slides open to reveal contents that are easily accessed. When we're finished, the drawer closes again. This works well for navigation because it stays out of the way, allowing more space on the screen for the active task that the user is engaged with. Let's take a look at an example, starting with the App component:
import "typeface-roboto";
import React, { useState } from "react";
import Drawer from "@material-ui/core/Drawer";
...
import { BrowserRouter as Router, Route, Switch, Link } from "react...
