76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import {
|
|
HStack,
|
|
Icon,
|
|
Image,
|
|
VStack,
|
|
Text,
|
|
Popover,
|
|
PopoverTrigger,
|
|
PopoverContent,
|
|
Link,
|
|
type StackProps,
|
|
Box,
|
|
} from "@chakra-ui/react";
|
|
import { type Session } from "next-auth";
|
|
import { signOut } from "next-auth/react";
|
|
import { BsBoxArrowRight, BsChevronRight, BsPersonCircle } from "react-icons/bs";
|
|
import NavSidebarOption from "./NavSidebarOption";
|
|
|
|
export default function UserMenu({ user, ...rest }: { user: Session } & StackProps) {
|
|
const profileImage = user.user.image ? (
|
|
<Image src={user.user.image} alt="profile picture" boxSize={8} borderRadius="50%" />
|
|
) : (
|
|
<Icon as={BsPersonCircle} boxSize={6} />
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Popover placement="right">
|
|
<PopoverTrigger>
|
|
<Box>
|
|
<NavSidebarOption>
|
|
<HStack
|
|
// Weird values to make mobile look right; can clean up when we make the sidebar disappear on mobile
|
|
py={2}
|
|
px={1}
|
|
spacing={3}
|
|
{...rest}
|
|
>
|
|
{profileImage}
|
|
<VStack spacing={0} align="start" flex={1} flexShrink={1}>
|
|
<Text fontWeight="bold" fontSize="sm">
|
|
{user.user.name}
|
|
</Text>
|
|
<Text color="gray.500" fontSize="xs">
|
|
{/* {user.user.email} */}
|
|
</Text>
|
|
</VStack>
|
|
<Icon as={BsChevronRight} boxSize={4} color="gray.500" />
|
|
</HStack>
|
|
</NavSidebarOption>
|
|
</Box>
|
|
</PopoverTrigger>
|
|
<PopoverContent _focusVisible={{ boxShadow: "unset", outline: "unset" }} maxW="200px">
|
|
<VStack align="stretch" spacing={0}>
|
|
{/* sign out */}
|
|
<HStack
|
|
as={Link}
|
|
onClick={() => {
|
|
signOut().catch(console.error);
|
|
}}
|
|
px={4}
|
|
py={2}
|
|
spacing={4}
|
|
color="gray.500"
|
|
fontSize="sm"
|
|
>
|
|
<Icon as={BsBoxArrowRight} boxSize={6} />
|
|
<Text>Sign out</Text>
|
|
</HStack>
|
|
</VStack>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</>
|
|
);
|
|
}
|