text: import React from 'react';
  import clsx from 'clsx';
  import PropTypes from 'prop-types';
  import { makeStyles } from '@material-ui/styles';
  import { AppBar, Toolbar, Hidden, IconButton } from '@material-ui/core';
  import MenuIcon from '@material-ui/icons/Menu';
  
  
  const useStyles = makeStyles(theme => ({
    root: {
      boxShadow: 'none',
      backgroundColor: 'transparent'
    },
    flexGrow: {
      flexGrow: 1
    },
    signOutButton: {
      marginLeft: theme.spacing(1)
    },
    menubutton: {
      color: '#FA75B3'
    }
  }));
  
  const Topbar = props => {
    const { className, onSidebarOpen, ...rest } = props;
  
    const classes = useStyles();
  
    
    return (
      <AppBar
        {...rest}
        className={clsx(classes.root, className)}
      >
        <Toolbar>
          <div className={classes.flexGrow} />
          <Hidden lgUp>
            <IconButton
              onClick={onSidebarOpen}
              className={classes.menubutton}
            >
              <MenuIcon />
            </IconButton>
          </Hidden>
        </Toolbar>
      </AppBar>
    );
  };
  
  Topbar.propTypes = {
    className: PropTypes.string,
    onSidebarOpen: PropTypes.func
  };
  
  export default Topbar;
  