🛂 Migrate to Chakra UI v3 (#1496)

Co-authored-by: github-actions <github-actions@github.com>

frontend/src/components/Common/Sidebar.tsx

@@ -1,33 +1,26 @@
-import {
-  Box,
-  Drawer,
-  DrawerBody,
-  DrawerCloseButton,
-  DrawerContent,
-  DrawerOverlay,
-  Flex,
-  IconButton,
-  Image,
-  Text,
-  useColorModeValue,
-  useDisclosure,
-} from "@chakra-ui/react"
+import { Box, Flex, IconButton, Text } from "@chakra-ui/react"
 import { useQueryClient } from "@tanstack/react-query"
-import { FiLogOut, FiMenu } from "react-icons/fi"
+import { useState } from "react"
+import { FaBars } from "react-icons/fa"
 
-import Logo from "/assets/images/fastapi-logo.svg"
+import { FiLogOut } from "react-icons/fi"
 import type { UserPublic } from "../../client"
 import useAuth from "../../hooks/useAuth"
+import {
+  DrawerBackdrop,
+  DrawerBody,
+  DrawerCloseTrigger,
+  DrawerContent,
+  DrawerRoot,
+  DrawerTrigger,
+} from "../ui/drawer"
 import SidebarItems from "./SidebarItems"
 
 const Sidebar = () => {
   const queryClient = useQueryClient()
-  const bgColor = useColorModeValue("ui.light", "ui.dark")
-  const textColor = useColorModeValue("ui.dark", "ui.light")
-  const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate")
   const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
-  const { isOpen, onOpen, onClose } = useDisclosure()
   const { logout } = useAuth()
+  const [open, setOpen] = useState(false)
 
   const handleLogout = async () => {
     logout()
@@ -36,78 +29,68 @@ const Sidebar = () => {
   return (
     <>
       {/* Mobile */}
-      <IconButton
-        onClick={onOpen}
-        display={{ base: "flex", md: "none" }}
-        aria-label="Open Menu"
-        position="absolute"
-        fontSize="20px"
-        m={4}
-        icon={<FiMenu />}
-      />
-      <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
-        <DrawerOverlay />
-        <DrawerContent maxW="250px">
-          <DrawerCloseButton />
-          <DrawerBody py={8}>
+      <DrawerRoot
+        placement="start"
+        open={open}
+        onOpenChange={(e) => setOpen(e.open)}
+      >
+        <DrawerBackdrop />
+        <DrawerTrigger asChild>
+          <IconButton
+            variant="ghost"
+            color="inherit"
+            display={{ base: "flex", md: "none" }}
+            aria-label="Open Menu"
+            position="absolute"
+            zIndex="100"
+            m={4}
+          >
+            <FaBars />
+          </IconButton>
+        </DrawerTrigger>
+        <DrawerContent maxW="280px">
+          <DrawerCloseTrigger />
+          <DrawerBody>
             <Flex flexDir="column" justify="space-between">
               <Box>
-                <Image src={Logo} alt="logo" p={6} />
-                <SidebarItems onClose={onClose} />
+                <SidebarItems />
                 <Flex
                   as="button"
                   onClick={handleLogout}
-                  p={2}
-                  color="ui.danger"
-                  fontWeight="bold"
                   alignItems="center"
+                  gap={4}
+                  px={4}
+                  py={2}
                 >
                   <FiLogOut />
-                  <Text ml={2}>Log out</Text>
+                  <Text>Log Out</Text>
                 </Flex>
               </Box>
               {currentUser?.email && (
-                <Text color={textColor} noOfLines={2} fontSize="sm" p={2}>
+                <Text fontSize="sm" p={2}>
                   Logged in as: {currentUser.email}
                 </Text>
               )}
             </Flex>
           </DrawerBody>
+          <DrawerCloseTrigger />
         </DrawerContent>
-      </Drawer>
+      </DrawerRoot>
 
       {/* Desktop */}
+
       <Box
-        bg={bgColor}
-        p={3}
-        h="100vh"
-        position="sticky"
-        top="0"
         display={{ base: "none", md: "flex" }}
+        position="sticky"
+        bg="bg.subtle"
+        top={0}
+        minW="280px"
+        h="100vh"
+        p={4}
       >
-        <Flex
-          flexDir="column"
-          justify="space-between"
-          bg={secBgColor}
-          p={4}
-          borderRadius={12}
-        >
-          <Box>
-            <Image src={Logo} alt="Logo" w="180px" maxW="2xs" p={6} />
-            <SidebarItems />
-          </Box>
-          {currentUser?.email && (
-            <Text
-              color={textColor}
-              noOfLines={2}
-              fontSize="sm"
-              p={2}
-              maxW="180px"
-            >
-              Logged in as: {currentUser.email}
-            </Text>
-          )}
-        </Flex>
+        <Box w="100%">
+          <SidebarItems />
+        </Box>
       </Box>
     </>
   )