feat: display an “account” button at the top right instead of the “logout” button

frontend/src/components/Header.tsx

-import { AppBar, Box, Button, Stack, Toolbar, Typography } from "@mui/material";
+import { useState } from "react";
+import {
+  AppBar,
+  Box,
+  IconButton,
+  Menu,
+  MenuItem,
+  Stack,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+import AccountCircle from "@mui/icons-material/AccountCircle";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
@@ -8,6 +19,15 @@
   const pathname = usePathname();
   const loggedIn = pathname !== "/login";
   const logout = useApiLogout();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
   return (
     <AppBar position="static">
@@ -44,9 +64,27 @@
         </Link>
         <Box flex={1} />
         {loggedIn ? (
-          <Button onClick={logout} variant={"contained"} color={"error"}>
-            {"Déconnexion"}
-          </Button>
+          <>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleMenu}
+              color="inherit"
+            >
+              <AccountCircle />
+            </IconButton>
+            <Menu
+              id="current-user-menu"
+              anchorEl={anchorEl}
+              keepMounted
+              open={Boolean(anchorEl)}
+              onClose={handleClose}
+            >
+              <MenuItem onClick={logout}>Déconnexion</MenuItem>
+            </Menu>
+          </>
         ) : null}
       </Toolbar>
     </AppBar>