fix: close navbar on mobile menu click

src/components/Sidebar/MobileNav.tsx

@@ -21,9 +21,10 @@ import { useState, useEffect } from "react"
 import { handleGetInfo, handleLogout } from "../../utils/auth"
 interface MobileProps extends FlexProps {
   onOpen: () => void
+  onClose: () => void
 }
 
-const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
+const MobileNav = ({ onOpen, onClose, ...rest }: MobileProps) => {
   const navigate = useNavigate()
   const [userInfo, setUserInfo] = useState({
     user_id: 0,
@@ -109,7 +110,13 @@ const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
               borderColor={useColorModeValue("gray.200", "gray.700")}
             >
               <MenuItem>Profile</MenuItem>
-              <MenuItem>Settings</MenuItem>
+              <MenuItem
+                onClick={() => {
+                  onClose()
+                }}
+              >
+                Settings
+              </MenuItem>
               <MenuDivider />
               <Link
                 to="/login"

src/components/Sidebar/NavItem.tsx

@@ -5,10 +5,11 @@ interface NavItemProps extends FlexProps {
   icon: IconType
   children: React.ReactNode
   link: string
+  onClick?: () => void
 }
-const NavItem = ({ icon, children, link, ...rest }: NavItemProps) => {
+const NavItem = ({ icon, children, link, onClick, ...rest }: NavItemProps) => {
   return (
-    <Link to={link}>
+    <Link to={link} onClick={onClick}>
       <Box style={{ textDecoration: "none" }} _focus={{ boxShadow: "none" }}>
         <Flex
           align="center"

src/components/Sidebar/Sidebar.tsx

@@ -30,7 +30,7 @@ const Sidebar = ({ children }: { children: ReactNode }) => {
           <SidebarContent onClose={onClose} />
         </DrawerContent>
       </Drawer>
-      <MobileNav onOpen={onOpen} />
+      <MobileNav onOpen={onOpen} onClose={onClose} />
       <Box ml={{ base: 0, md: 60 }} p="4">
         {children}
       </Box>

src/components/Sidebar/SidebarContent.tsx

@@ -75,7 +75,7 @@ const SidebarContent = ({ onClose, ...rest }: SidebarProps) => {
         <CloseButton display={{ base: "flex", md: "none" }} onClick={onClose} />
       </Flex>
       {LinkItems.map((item) => (
-        <NavItem key={item.name} icon={item.icon} link={item.link}>
+        <NavItem key={item.name} icon={item.icon} link={item.link} onClick={onClose}>
           {item.name}
         </NavItem>
       ))}