src/components/InfoMenu.tsx

import { useState, MouseEvent } from "react";
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import InfoIcon from "@mui/icons-material/Info";
import { useRouter } from "next/router";

export function InfoMenu() {
	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
	const open = Boolean(anchorEl);
	const handleClick = (event: MouseEvent<HTMLElement>) => {
		setAnchorEl(event.currentTarget);
	};
	const router = useRouter();
	const handleClose = () => {
		setAnchorEl(null);
	};

	return (
		<div>
			<IconButton
				aria-label="Info"
				id="infoMenu-button"
				aria-controls={open ? "infoMenu-menu" : undefined}
				aria-expanded={open ? "true" : undefined}
				aria-haspopup="true"
				onClick={handleClick}
			>
				<InfoIcon />
			</IconButton>
			<Menu
				id="infoMenu-menu"
				MenuListProps={{
					"aria-labelledby": "infoMenu-button",
				}}
				anchorEl={anchorEl}
				open={open}
				onClose={handleClose}
				PaperProps={{
					style: {
						width: "20ch",
					},
				}}
			>
				<MenuItem
					onClick={async () => {
						await router.push("/legal/data-policy");
						handleClose();
					}}
				>
					Data Policy
				</MenuItem>
				<MenuItem
					onClick={async () => {
						await router.push("/legal/imprint");
						handleClose();
					}}
				>
					Imprint
				</MenuItem>
				<MenuItem
					onClick={async () => {
						await router.push("/legal/cookie-policy");
						handleClose();
					}}
				>
					Cookie Policy
				</MenuItem>
			</Menu>
		</div>
	);
}