supachat/src/Components/Appbar.js

import { useState } from 'react';
import { Box, AppBar, Typography, Toolbar, IconButton } from '@mui/material';
import AccountCircle from '@mui/icons-material/AccountCircle';
import { UserProfile } from './UserProfile';

export const Appbar = () => {
  const [showDrawer, setShowDrawer] = useState(false);

  const toggleDrawer = () => (event) => {
    if (
      event.type === 'keydown' &&
      (event.key === 'Tab' || event.key === 'Shift')
    ) {
      return;
    }

    setShowDrawer((showDrawer) => !showDrawer);
  };

  return (
    <Box>
      <AppBar>
        <Toolbar>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            supachat
          </Typography>
          <div>
            <IconButton
              size="large"
              aria-label="account of current user"
              aria-controls="menu-appbar"
              aria-haspopup="true"
              onClick={toggleDrawer()}
              color="inherit"
            >
              <AccountCircle />
            </IconButton>
            <UserProfile toggleDrawer={toggleDrawer} showDrawer={showDrawer} />
          </div>
        </Toolbar>
      </AppBar>
    </Box>
  );
};