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

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


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>
				<Menu.Positioner zIndex="popover">
					<Menu.Content>
						<Menu.Item value="account">Account</Menu.Item>
						<Menu.Item value="settings">Settings</Menu.Item>
						<Menu.Item value="logout">Logout</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu.Root>
		);
}