45 lines
1.1 KiB
React
45 lines
1.1 KiB
React
import { Avatar, Menu, Portal, Box } from "@chakra-ui/react";
|
|
import { NavLink } from "react-router-dom";
|
|
import useAuthStore from "../../store/authStore";
|
|
|
|
export default function UserAvatarMenu({ name, avatar }) {
|
|
const { logout } = useAuthStore();
|
|
|
|
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>
|
|
|
|
{/* Replaced console.log with the Zustand logout action */}
|
|
<Menu.Item
|
|
value="logout"
|
|
onClick={logout}
|
|
color="red.600"
|
|
_dark={{ color: "red.400" }}
|
|
>
|
|
Logout
|
|
</Menu.Item>
|
|
</Menu.Content>
|
|
</Menu.Positioner>
|
|
</Portal>
|
|
</Menu.Root>
|
|
);
|
|
} |