update

src/App.js

@@ -57,6 +57,7 @@ import CardHolder from "./components/CardHolder";
 import UploadFile from "./components/UploadFile";
 import BarChartApex from "./components/BarChartApex";
 import SemiDonut from "./components/SemiDonut";
+import FolderTree from "./components/FolderTree";
 
 // import Digikala from "./components/Digikala/ImageSlider";
 
@@ -122,6 +123,8 @@ function App() {
         {/* <UploadFile /> */}
         {/* <BarChartApex /> */}
         {/* <SemiDonut /> */}
+        <FolderTree />
+        <SidebarDesign2 className="w-1/5" />
       </div>
     </Provider>
   );

src/components/FolderTree/images/arrow.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <g id="vuesax_bold_arrow-left" data-name="vuesax/bold/arrow-left" transform="translate(-364 -252)">
+    <g id="arrow-left" transform="translate(364 252)">
+      <path id="Vector" d="M3.627.2,1.62,2.205.389,3.43a1.332,1.332,0,0,0,0,1.881L3.627,8.549a.674.674,0,0,0,1.15-.475V.674A.673.673,0,0,0,3.627.2Z" transform="translate(5.111 3.126)" fill="#cbe0fc"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H15V15H0Z" transform="translate(15 15) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/FolderTree/images/selectedArrow.svg

@@ -0,0 +1,4 @@
+<svg id="arrow-left" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <path id="Vector" d="M3.627.2,1.62,2.205.389,3.43a1.332,1.332,0,0,0,0,1.881L3.627,8.549a.674.674,0,0,0,1.15-.475V.674A.673.673,0,0,0,3.627.2Z" transform="translate(5.111 3.126)" fill="#3786ec"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H15V15H0Z" transform="translate(15 15) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/FolderTree/index.js

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+
+import folder from "./images/folder.svg";
+import selectedFolder from "./images/selectedFolder.svg";
+
+import arrow from "./images/arrow.svg";
+import selectedArrow from "./images/selectedArrow.svg";
+
+const FolderTree = ({ items }) => {
+  const [activeDropdown, setActiveDropdown] = useState(null);
+
+  return (
+    <div className="bg-white w-72 p-4 mx-auto">
+      {items.map((item, index) => (
+        <div>
+          {/*  level1 */}
+          <div
+            key={index}
+            className="flex flex-row items-center mb-2 cursor-pointer"
+            onClick={() =>
+              setActiveDropdown(activeDropdown === item ? null : item)
+            }
+          >
+            {/* روش اول */}
+            {/* {activeDropdown === item && <img src={item.normalArrow} />}
+            {activeDropdown === null && <img src={item.icon} />} */}
+            {/* روش دوم */}
+            {activeDropdown === item ? (
+              <img src={selectedArrow} className="-rotate-90" />
+            ) : (
+              <img src={arrow} />
+            )}
+            {activeDropdown === item ? (
+              <img src={selectedFolder} />
+            ) : (
+              <img src={folder} />
+            )}
+            {/* {activeDropdown === null && <img src={folder} />}
+            {activeDropdown === item && <img src={selectedFolder} />} */}
+            <span className="text-sm mr-2" style={{ color: "#00253A" }}>
+              {item.name}
+            </span>
+          </div>
+          {item.menuItems.map((menuItem, i) => (
+            <div
+              key={i}
+              className="flex flex-row items-center mb-2 cursor-pointer mr-5"
+            >
+              <img src={arrow} />
+              <img src={folder} />
+              <span className="text-sm mr-2" style={{ color: "#00253A" }}>
+                {menuItem.title}
+              </span>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default FolderTree;
+
+FolderTree.defaultProps = {
+  items: [
+    {
+      name: "فیلم‌ها وعکس مربوط به حادثه",
+      menuItems: [
+        { title: "فایل‌های مربوط به پارسال" },
+        { title: "اخبار و گزارشات سال 1399" },
+        { title: "فایل‌های مربوط به پارسال" },
+      ],
+    },
+    {
+      name: "فرایند‌های بازرسی",
+      menuItems: [],
+    },
+    {
+      name: "صوت جلسات استاد براتی",
+      menuItems: [],
+    },
+    {
+      name: "رویشه اصلی سایت",
+      menuItems: [],
+    },
+    {
+      name: "فرایند‌های بازرسی",
+      menuItems: [],
+    },
+  ],
+};