1import Avatar from '@material-ui/core/Avatar';
 2import Icon from '@material-ui/core/Icon';
 3import {makeStyles} from '@material-ui/core/styles';
 4import useProfile from '../../hooks/useProfile';
 5
 6const UserIcon = () => {
 7  const {profile} = useProfile();
 8  const classes = useStyles();
 9
10  if (profile)
11    return (
12      <Avatar className={classes.avatar}>
13        {`${profile.username[0]}`.toUpperCase()}
14      </Avatar>
15    );
16  else return <Icon>more_vert</Icon>;
17};
18
19const useStyles = makeStyles(theme => ({
20  avatar: {
21    width: theme.spacing(3),
22    height: theme.spacing(3),
23    fontSize: 16,
24  },
25}));
26
27export default UserIcon;