text: import React from 'react';
  import { NavLink } from 'react-router-dom';
  import AppBar from '@material-ui/core/AppBar';
  import Box from '@material-ui/core/Box';
  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';
  
  const MenuAppBar = ({ token, setToken }) => {
    const handleLogout = () => {
      setToken({});
    };
  
    return (
      <Box sx={{ flexGrow: 1 }}>
        <AppBar position='static'>
          <Toolbar>
            <IconButton
              edge='start'
              color='inherit'
              aria-label='menu'
              sx={{ mr: 2 }}
            >
              <MenuIcon />
            </IconButton>
            <Typography
              variant='h6'
              component='div'
              sx={{ flexGrow: 1 }}
              style={{ flex: 1 }}
            ></Typography>
            {token ? (
              <Button onClick={handleLogout} color='inherit'>
                Log Out
              </Button>
            ) : (
              <NavLink to='/login'>
                <Button color='inherit'>Login</Button>
              </NavLink>
            )}
          </Toolbar>
        </AppBar>
      </Box>
    );
  }
  export default MenuAppBar;
  