text: import React from "react";
  import PropTypes from "prop-types";
  import { withStyles } 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 LongMenu from "./LongMenu";
  import Avatar from "@material-ui/core/Avatar";
  
  const styles = {
    root: {
      flexGrow: 1
    },
    flex: {
      flex: 1
    },
    menuButton: {
      marginLeft: -12,
      marginRight: 20
    }
  };
  
  class ButtonAppBar extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      const { classes } = this.props;
      return (
        <div className={classes.root}>
          <AppBar position="static">
            <Toolbar>
              <Avatar src={this.props.icon} className={classes.menuButton} />
              <Typography
                variant="title"
                color="inherit"
                className={classes.flex}
              >
                {this.props.username}
              </Typography>
              <LongMenu user={this.props} />{" "}
            </Toolbar>
          </AppBar>
        </div>
      );
    }
  }
  
  ButtonAppBar.propTypes = {
    classes: PropTypes.object.isRequired
  };
  
  export default withStyles(styles)(ButtonAppBar);
  