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)" }}
                >
                    <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>
    );
}