alihan/OpenPipe-llm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wrap in Portal (#191)

Browse Source
This commit is contained in:
arcticfly
2023-08-23 23:48:53 -07:00
committed by GitHub
parent 87e2339df2
commit ec59252010
1 changed files with 59 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
app/src/components/nav/ProjectMenu.tsx
View File

@@ -14,6 +14,7 @@ import {
Link as ChakraLink, Link as ChakraLink,
Image, Image,
Box, Box,
Portal,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { useEffect } from "react"; import { useEffect } from "react";
import Link from "next/link"; import Link from "next/link";
@@ -109,64 +110,66 @@ export default function ProjectMenu() {
</HStack> </HStack>
</NavSidebarOption> </NavSidebarOption>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <Portal>
_focusVisible={{ outline: "unset" }} <PopoverContent
w={220} _focusVisible={{ outline: "unset" }}
ml={{ base: 2, md: 0 }} w={220}
boxShadow="0 0 40px 4px rgba(0, 0, 0, 0.1);" ml={{ base: 2, md: 0 }}
fontSize="sm" boxShadow="0 0 40px 4px rgba(0, 0, 0, 0.1);"
> fontSize="sm"
<VStack alignItems="flex-start" spacing={1} py={1}> >
<Text px={3} py={2}> <VStack alignItems="flex-start" spacing={1} py={1}>
{user?.user.email} <Text px={3} py={2}>
</Text> {user?.user.email}
<Divider /> </Text>
<Text alignSelf="flex-start" fontWeight="bold" px={3} pt={2}> <Divider />
Your Projects <Text alignSelf="flex-start" fontWeight="bold" px={3} pt={2}>
</Text> Your Projects
<VStack spacing={0} w="full" px={1}> </Text>
{projects?.map((proj) => ( <VStack spacing={0} w="full" px={1}>
<ProjectOption {projects?.map((proj) => (
key={proj.id} <ProjectOption
proj={proj} key={proj.id}
isActive={proj.id === selectedProjectId} proj={proj}
onClose={popover.onClose} isActive={proj.id === selectedProjectId}
/> onClose={popover.onClose}
))} />
<HStack ))}
as={Button} <HStack
variant="ghost" as={Button}
colorScheme="blue" variant="ghost"
color="blue.400" colorScheme="blue"
fontSize="sm" color="blue.400"
justifyContent="flex-start" fontSize="sm"
onClick={createProject} justifyContent="flex-start"
w="full" onClick={createProject}
borderRadius={4} w="full"
spacing={0} borderRadius={4}
> spacing={0}
<Text>Add project</Text> >
<Icon as={isLoading ? Spinner : BsPlus} boxSize={4} strokeWidth={0.5} /> <Text>Add project</Text>
</HStack> <Icon as={isLoading ? Spinner : BsPlus} boxSize={4} strokeWidth={0.5} />
</VStack> </HStack>
</VStack>
<Divider /> <Divider />
<VStack w="full" px={1}> <VStack w="full" px={1}>
<ChakraLink <ChakraLink
onClick={() => { onClick={() => {
signOut().catch(console.error); signOut().catch(console.error);
}} }}
_hover={{ bgColor: "gray.200", textDecoration: "none" }} _hover={{ bgColor: "gray.200", textDecoration: "none" }}
w="full" w="full"
py={2} py={2}
px={2} px={2}
borderRadius={4} borderRadius={4}
> >
<Text>Sign out</Text> <Text>Sign out</Text>
</ChakraLink> </ChakraLink>
</VStack>
</VStack> </VStack>
</VStack> </PopoverContent>
</PopoverContent> </Portal>
</Popover> </Popover>
</VStack> </VStack>
); );