fix: pr feedback changes

src/components/Sidebar/sidebar.tsx

@@ -7,29 +7,21 @@ import useSidebar from "@/hooks/useSidebar";
 import { MenuItem, MenuStack, SidebarContainer, Text } from "./styled";
 import { SidebarProps } from "./types";
 
-const Sidebar = (props: SidebarProps) => {
-  const { handleSiebarToggle } = props; // Keep this line, we'll fix the usage below
+const Sidebar = ({ handleSidebarToggle }: SidebarProps) => {
   const { sidebarItems } = useSidebar();
-  const [selected, setSelected] = useState<string>("");
+  const [selected, setSelected] = useState("");
 
   const handleClick = (item: string) => {
     setSelected(item);
-    if (handleSiebarToggle) {
-      handleSiebarToggle();
-    }
+    handleSidebarToggle?.();
   };
 
   return (
     <SidebarContainer>
       <MenuStack>
         {sidebarItems.map((item) => (
-          <MenuItem
-            key={item}
-            isSelected={item === selected}
-            onClick={() => handleClick(item)} // Call the new function
-          >
+          <MenuItem key={item} isSelected={item === selected} onClick={() => handleClick(item)}>
             <Image src="/assets/images/sidebar-item-icon.svg" alt={item} width={18} height={12} />
-
             <Text>{item}</Text>
           </MenuItem>
         ))}

src/components/Sidebar/types.ts

@@ -1,3 +1,3 @@
 export type SidebarProps = {
-  handleSiebarToggle: () => void;
+  handleSidebarToggle?: VoidFunction;
 };

src/components/containers/MainLayoutContainer/mainLayoutContainer.tsx

@@ -20,7 +20,7 @@ const MainLayoutContainer = ({ children }: TMainLayoutContainer) => {
     <MainContainer>
       <MainStack>
         <SidebarContainer>
-          <Sidebar handleSiebarToggle={() => {}} />
+          <Sidebar />
         </SidebarContainer>
 
         <ContentContainer>{children}</ContentContainer>