Header.tsx

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";
import { useApiLogout } from "@/api/cubicweb";

export function Header() {
  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">
      <Toolbar>
        <Link
          href={"/"}
          prefetch={false}
          style={{
            textDecoration: "none",
            color: "inherit",
          }}
        >
          <Stack
            direction={"row"}
            spacing={2}
            flexGrow={1}
            alignItems={"center"}
          >
            <Image
              src={"/rodolf.jpg"}
              alt={"Rodolf logo"}
              width={50}
              height={50}
            />
            <Typography
              variant="h6"
              sx={{
                display: { xs: "none", sm: "none", md: "block" },
              }}
            >
              Rodolf
            </Typography>
          </Stack>
        </Link>
        <Box flex={1} />
        {loggedIn ? (
          <>
            <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>
  );
}