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-router-dom";
import First from "./First";
import Second from "./Second";
import Third from "./Third";

export default function App({ links }) {
  const [open, setOpen] = useState(false);

  function toggleDrawer({ type, key }) {
    if (type === "keydown" && (key === "Tab" || key === "Shift")) {
      return;
    }

...