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,32 +22,34 @@ 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 */}
-            <div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer ">
+          {activeAccordion === item &&
-              <div className="flex flex-row items-center">
+            item.subItems.map((subItem, i) => (
-                <img
+              <div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer ">
-                  src="images/accordionGroup2725.svg"
+                <div className="flex flex-row items-center">
-                  className="w-4"
+                  <img
-                  alt="line"
+                    src="images/accordionGroup2725.svg"
-                />
+                    className="w-4"
-                <span className="mr-3 text-sm">1</span>
+                    alt="line"
-              </div>
+                  />
-              <div className="w-0.5 h-6 mx-3 bg-surfaceBorder"></div>
+                  <span className="mr-3 text-sm">1</span>
-              <p className="text-sm flex-1">{subItem.name}</p>
+                </div>
-              <div className="flex flex-row items-center justify-end gap-x-3 flex-1">
+                <div className="w-0.5 h-6 mx-3 bg-surfaceBorder"></div>
-                <img
+                <p className="text-sm flex-1">{subItem.name}</p>
-                  src="images/accordionGroup2724.svg"
+                <div className="flex flex-row items-center justify-end gap-x-3 flex-1">
-                  className="w-8 rounded"
+                  <img
-                  alt="delete-button"
+                    src="images/accordionGroup2724.svg"
-                />
+                    className="w-8 rounded"
-                <img
+                    alt="delete-button"
-                  src="images/accordionGroup2723.svg"
+                  />
-                  className="w-8 rounded"
+                  <img
-                  alt="edit-button"
+                    src="images/accordionGroup2723.svg"
-                />
+                    className="w-8 rounded"
+                    alt="edit-button"
+                  />
+                </div>
               </div>
-            </div>
+            ))}
-          ))}
         </div>
       ))}
     </section>