diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 0e57e360a70cffcbe0a65259670916b44976d516_ZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvSGVhZGVyLnRzeA==..8338eb6ceaef611d948e602d6d542564216c18e1_ZnJvbnRlbmQvc3JjL2NvbXBvbmVudHMvSGVhZGVyLnRzeA== 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,4 +1,15 @@ -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>