Function Drawer

frontend/src/components/commonUI/Drawer.tsx:53–137

({ isOpen, setIsOpen }: { isOpen: boolean; setIsOpen: (open: boolean) => void })

}

function Drawer({ isOpen, setIsOpen }: { isOpen: boolean; setIsOpen: (open: boolean) => void }) {
  const { t } = useTranslation()
  const { logout } = useAuth()
  const { colorMode, toggleColorMode } = useColorMode()
  const queryClient = useQueryClient()
  const currentUser = queryClient.getQueryData<{ email: string }>(['currentUser'])
  const flashcardsService = { getCollections }
  const navigate = useNavigate()

  const { data, isLoading } = useQuery({
    queryKey: ['collections'],
    queryFn: flashcardsService.getCollections,
    placeholderData: (prevData) => prevData,
  })

  const collections: Collection[] = data || []

  const handleNavigate = () => setIsOpen(false)

  const handleLogout = async () => {
    logout()
    setIsOpen(false)
    navigate({ to: '/' })
  }

  return (
    <DrawerRoot open={isOpen} onOpenChange={(e) => setIsOpen(e.open)} placement="end">
      <DrawerBackdrop />
      <DrawerContent rounded="none" maxW="280px" bg="bg.box">
        <DrawerHeader display="flex" justifyContent="center" padding=".5rem">
          <Link to="/collections" onClick={handleNavigate}>
            <Image width="3rem" src={Logo} alt="logo" />
          </Link>
        </DrawerHeader>
        <DrawerBody py={2} px={1}>
          <VStack align="stretch">
            {isLoading ? (
              <VStack py={4}>
                <Spinner />
              </VStack>
            ) : (
              <List.Root>
                {collections.map((collection: Collection) => (
                  <CollectionListItem
                    key={collection.id}
                    collection={collection}
                    onNavigate={handleNavigate}
                  />
                ))}
              </List.Root>
            )}
          </VStack>
        </DrawerBody>
        <DrawerFooter>
          <VStack width="100%" gap={2}>
            <HStack justifyContent="flex-end" w="100%" alignItems="center">
              {currentUser?.email && (
                <Text fontSize="sm" color="fg.muted" maxWidth="11.5rem" truncate>