Add menu to navi to create hamburger menu

bin/app/components/Navi.js

@@ -1,25 +1,60 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types'; 
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
+import React, { useState } from "react";
 
-class Navi extends Component {
-  render() {
-    return (
-      <AppBar position="absolute" style={this.props.style}>
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+
+import ListSubheader from "@material-ui/core/ListSubheader";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import Drawer from "@material-ui/core/Drawer";
+
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+
+import { Link } from "react-router-dom";
+
+const Navi = ({ title }) => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <AppBar position="sticky" style={{ backgroundColor: "white" }}>
         <Toolbar>
-          <Typography variant="title" color="inherit">
-            {this.props.title}
-          </Typography>
+          <IconButton onClick={() => setOpen(!isOpen)}>
+            <MenuIcon />
+          </IconButton>
+          <div
+            style={{
+              fontWeight: 900,
+              fontSize: 20,
+              marginLeft: 24,
+              color: "black"
+            }}
+          >
+            {title}
+          </div>
         </Toolbar>
       </AppBar>
-    );
-  }
-}
-
-Navi.propTypes = {
-  title: PropTypes.string.isRequired,
-}
+      <Drawer open={isOpen} onClose={() => setOpen(false)}>
+        <List
+          style={{
+            width: 200,
+            height: "100%",
+            backgroundColor: "rgb(44,44,44)",
+            color: "white"
+          }}
+        >
+          <ListSubheader style={{ color: "white" }}>Menu</ListSubheader>
+          <ListItem component={Link} to="/" button>
+            Top
+          </ListItem>
+          <ListItem component={Link} to="/sample" button>
+            Sample
+          </ListItem>
+        </List>
+      </Drawer>
+    </>
+  );
+};
 
 export default Navi;