update src/components/Accordion/AccordionDesign1/index.js and src/components/Sidebar/SidebarDesign2/index.js

src/components/Accordion/AccordionDesign1/index.js

@@ -1,13 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import CircleInCircle from "../../MiniComponents/CircleInCircle";
 
 const AccordionDesign1 = ({ items }) => {
+  const [activeAccordion, setActiveAccordion] = useState(null);
+
   return (
     <section className="w-full flex flex-col ">
-      {/* header */}
       {items.map((item, index) => (
         <div className="flex flex-col" key={index}>
-          <div className="flex flex-row items-center justify-between px-3 py-5  border-b-2 border-secondary cursor-pointer">
+          {/* parent */}
+          <div
+            className="flex flex-row items-center justify-between px-3 py-5  border-b-2 border-secondary cursor-pointer"
+            onClick={() =>
+              setActiveAccordion(activeAccordion === item ? null : item)
+            }
+          >
             <CircleInCircle
               parentClassName={"bg-secondaryDark  w-3 h-3 "}
               childClassName={false}
@@ -15,7 +22,9 @@ const AccordionDesign1 = ({ items }) => {
             <h2 className="flex-1 mr-7 text-sm">{item.title}</h2>
             <img src="images/accordion+.svg" alt="" class="w-3 ml-2" />
           </div>
-          {item.subItems.map((subItem, i) => (
+          {/* child */}
+          {activeAccordion === item &&
+            item.subItems.map((subItem, i) => (
               <div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer ">
                 <div className="flex flex-row items-center">
                   <img