From 39f49d59bcf11933d70bba1b228fda8c9a27c985 Mon Sep 17 00:00:00 2001
From: Alejandra <90076947+alejsdev@users.noreply.github.com>
Date: Mon, 29 Jan 2024 17:42:09 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=20Add=20`onClose`=20to=20`Sideb?=
 =?UTF-8?q?arItems`=20(#589)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/new-frontend/src/components/Sidebar.tsx      | 2 +-
 src/new-frontend/src/components/SidebarItems.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/new-frontend/src/components/Sidebar.tsx b/src/new-frontend/src/components/Sidebar.tsx
index d2f2e833342..a67623076f5 100644
--- a/src/new-frontend/src/components/Sidebar.tsx
+++ b/src/new-frontend/src/components/Sidebar.tsx
@@ -23,7 +23,7 @@ const Sidebar: React.FC = () => {
                         <Flex flexDir="column" justify="space-between" h="100%">
                             <Box>
                                 <Image src={Logo} alt="Logo" />
-                                <SidebarItems />
+                                <SidebarItems onClose={onClose} />
                             </Box>
                             <UserInfo />
                         </Flex>
diff --git a/src/new-frontend/src/components/SidebarItems.tsx b/src/new-frontend/src/components/SidebarItems.tsx
index 8970410d8cc..7790111f805 100644
--- a/src/new-frontend/src/components/SidebarItems.tsx
+++ b/src/new-frontend/src/components/SidebarItems.tsx
@@ -12,12 +12,16 @@ const items = [
     { icon: FiLogOut, title: 'Log out' }
 ];
 
-const SidebarItems: React.FC = () => {
+interface SidebarItemsProps {
+    onClose?: () => void;
+}
+
+const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
     const listItems = items.map((item) => (
         <Flex w="100%" p={2} key={item.title} _hover={{
             background: "gray.200",
             borderRadius: "12px",
-        }}>
+        }} onClick={onClose}>
             <Link to={item.path || "/"}>
                 <Flex color="teal.500" gap={4}>
                     <Icon as={item.icon} alignSelf="center" />