text: import React from 'react';
  import PropTypes from 'prop-types';
  import { makeStyles } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  import Avatar from '@material-ui/core/Avatar';
  import List from '@material-ui/core/List';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemAvatar from '@material-ui/core/ListItemAvatar';
  import ListItemText from '@material-ui/core/ListItemText';
  import DialogTitle from '@material-ui/core/DialogTitle';
  import Dialog from '@material-ui/core/Dialog';
  import PersonIcon from '@material-ui/icons/Person';
  import AddIcon from '@material-ui/icons/Add';
  import Typography from '@material-ui/core/Typography';
  import { blue } from '@material-ui/core/colors';
  import IconButton from '@material-ui/core/IconButton';
  import AccountCircleIcon from '@material-ui/icons/AccountCircle';
  import {Grid} from '@material-ui/core'
  
  const emails = ['username@gmail.com', 'user02@gmail.com'];
  const useStyles = makeStyles({
    avatar: {
      backgroundColor: blue[100],
      color: blue[600],
    },
  });
  
  function SimpleDialog(props) {
    const classes = useStyles();
    const { onClose, selectedValue, open } = props;
  
    const handleClose = () => {
      onClose(selectedValue);
    };
  
    const handleListItemClick = (value) => {
      onClose(value);
    };
  
    return (
      <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
        <DialogTitle id="simple-dialog-title">User Profile</DialogTitle>
        <Grid container direction="column" justify="center" alignItems="center">
        {/* <Avatar>{localStorage.getItem("username")}</Avatar> */}
        {/* <h2>{localStorage.getItem("username")}</h2> */}
        <h1 style={{ color: '#023373' }}>{localStorage.getItem("username")}</h1>
        </Grid>
      </Dialog>
    );
  }
  
  SimpleDialog.propTypes = {
    onClose: PropTypes.func.isRequired,
    open: PropTypes.bool.isRequired,
    selectedValue: PropTypes.string.isRequired,
  };
  
  export default function SimpleDialogDemo() {
    const [open, setOpen] = React.useState(false);
    const [selectedValue, setSelectedValue] = React.useState(emails[1]);
  
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = (value) => {
      setOpen(false);
      setSelectedValue(value);
    };
  
    return (
      <div>
        {/* <Typography variant="subtitle1">Selected: {selectedValue}</Typography>
        <br /> */}
        {/* <Button color="post-primary" onClick={handleClickOpen}>
          Open simple dialog
        </Button> */}
        <IconButton
                color="inherit"
                aria-label="open drawer"
                edge="start"
                onClick={handleClickOpen}
              >
                <AccountCircleIcon />
              </IconButton>
        <SimpleDialog selectedValue={selectedValue} open={open} onClose={handleClose} />
      </div>
    );
  }
  