text: import React from 'react'
  import { makeStyles } from '@material-ui/core/styles'
  import AppBar from '@material-ui/core/AppBar'
  import Toolbar from '@material-ui/core/Toolbar'
  import Typography from '@material-ui/core/Typography'
  import Button from '@material-ui/core/Button'
  import IconButton from '@material-ui/core/IconButton'
  import MenuIcon from '@material-ui/icons/Menu'
  import { Link } from 'react-router-dom'
  
  const useStyles = makeStyles((theme) => ({
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
    link: {
      color: 'white',
      textDecoration: 'none'
    }
  }))
  
  const Navbar = () => {
    const classes = useStyles()
  
    return (
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            Google Books Search
            </Typography>
          <Link to="/" className={classes.link}>
            <Button color="inherit">
              Home
            </Button>
          </Link>
          <Link to="/saved" className={classes.link}>
            <Button color="inherit">
              Saved
            </Button>
          </Link>
        </Toolbar>
      </AppBar>
    )
  }
  
  export default Navbar
  