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';
  
  const useStyles = makeStyles(theme => ({
    grow: {
      flexGrow: 1,
    },
   
    title: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
  }));
  
  export default function HeaderMenu() {
    const classes = useStyles();
  
    return (
      <>
        <AppBar position="static">
          <Toolbar>
            <Typography className={classes.title} variant="h6" noWrap>
              ChuckJokes
              </Typography>
            <div className={classes.grow} />
          </Toolbar>
        </AppBar>
      </>
    );
  }