Web-Frontend/client/src/components/layout/UserAvatarMenu.jsx

import { Avatar, Menu, Portal, Box } from "@chakra-ui/react";
import { NavLink } from "react-router-dom";


export default function UserAvatarMenu({ name, avatar }) {
	return (
		<Menu.Root>
			<Menu.Trigger focusRing="none">
				<Box
						rounded="full" 
						tabIndex={0}
						_hover={{ boxShadow: "0 0 0 2px rgb(102, 122, 182)" }}
						cursor="pointer"
				>
					<Avatar.Root shape="full">
						<Avatar.Fallback name={name} />
						<Avatar.Image src={avatar} />
					</Avatar.Root>
				</Box>
			</Menu.Trigger>
			<Portal>
				{/* zIndex: overlay = 1300 */}
				<Menu.Positioner zIndex="overlay"> 
					<Menu.Content>
						<Menu.Item value="settings" as={NavLink} to={"/settings"}>
							Settings
						</Menu.Item>
						<Menu.Item value="logout" onClick={() => console.log("Log out triggered")}>
							Logout
						</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu.Root>
		);
}