frontend/src/components/TopBar/Profile.tsx

import { Menu, MenuItem } from "@material-ui/core";
import React, { FC } from "react";

interface ProfileProps {
	anchorEl: HTMLElement | null;
	handleClose: () => void;
	handleLogout: () => void;
}

export const Profile: FC<ProfileProps> = ({
	anchorEl,
	handleClose,
	handleLogout,
	...restProps
}) => {
	return (
		<Menu
			className="top-bar__menu"
			id="simple-menu"
			anchorEl={anchorEl}
			keepMounted
			open={Boolean(anchorEl)}
			onClose={handleClose}
		>
			<MenuItem>Profile</MenuItem>
			<MenuItem>My account</MenuItem>
			<MenuItem
				onClick={() => {
					handleLogout();
				}}
			>
				Logout
			</MenuItem>
		</Menu>
	);
};