update

src/components/FolderTree/index.js

@@ -26,39 +26,92 @@ const FolderTree = ({ items }) => {
             {activeDropdown === null && <img src={item.icon} />} */}
             {/* روش دوم */}
             {activeDropdown === item ? (
-              <img src={selectedArrow} className="-rotate-90" />
+              <img
+                src={selectedArrow}
+                className="-rotate-90 transition-all duration-700"
+              />
             ) : (
-              <img src={arrow} />
+              <img src={arrow} className=" transition-all duration-700" />
             )}
             {activeDropdown === item ? (
-              <img src={selectedFolder} />
+              <img
+                src={selectedFolder}
+                className=" transition-all duration-700"
+              />
             ) : (
-              <img src={folder} />
+              <img src={folder} className=" transition-all duration-700" />
             )}
-            {/* {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) => (
+          {activeDropdown === item &&
-            <div
+            item.menuItems.map((menuItem, i) => (
-              key={i}
+              <div>
-              className="flex flex-row items-center mb-2 cursor-pointer mr-5"
+                <button
-            >
+                  onClick={() =>
-              <img src={arrow} />
+                    setActiveDropdown(
-              <img src={folder} />
+                      activeDropdown === menuItem ? null : menuItem
-              <span className="text-sm mr-2" style={{ color: "#00253A" }}>
+                    )
-                {menuItem.title}
+                  }
-              </span>
+                  className="transform translate-x-10"
-            </div>
+                >
-          ))}
+                  mahdi
+                </button>
+                <div
+                  key={i}
+                  className="flex flex-row items-center mb-2 cursor-pointer mr-5"
+                  // onClick={() =>
+                  //   setActiveDropdown(
+                  //     activeDropdown === menuItem ? null : menuItem
+                  //   )
+                  // }
+                >
+                  {activeDropdown === menuItem ? (
+                    <img
+                      src={selectedArrow}
+                      className="-rotate-90 transition-all duration-700"
+                    />
+                  ) : (
+                    <img src={arrow} className=" transition-all duration-700" />
+                  )}
+                  {activeDropdown === menuItem ? (
+                    <img
+                      src={selectedFolder}
+                      className=" transition-all duration-700"
+                    />
+                  ) : (
+                    <img
+                      src={folder}
+                      className=" transition-all duration-700"
+                    />
+                  )}
+
+                  <span className="text-sm mr-2" style={{ color: "#00253A" }}>
+                    {menuItem.title}
+                  </span>
+                </div>
+              </div>
+            ))}
         </div>
       ))}
     </div>
   );
 };
 
+// {item.menuItem.menuSubItems.map((menuSubItem, j) => (
+//   <div
+//     key={j}
+//     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" }}>
+//       {menuSubItem.subTitle}
+//     </span>
+//   </div>
+// ))}
+
 export default FolderTree;
 
 FolderTree.defaultProps = {
@@ -66,26 +119,70 @@ FolderTree.defaultProps = {
     {
       name: "فیلم‌ها وعکس مربوط به حادثه",
       menuItems: [
-        { title: "فایل‌های مربوط به پارسال" },
+        {
-        { title: "اخبار و گزارشات سال 1399" },
+          title: "فایل‌های مربوط به پارسال",
-        { title: "فایل‌های مربوط به پارسال" },
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+        {
+          title: "اخبار و گزارشات سال 1399",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+        {
+          title: "فایل‌های مربوط به پارسال",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
       ],
     },
     {
-      name: "فرایند‌های بازرسی",
+      name: "فیلم‌ها وعکس مربوط به حادثه",
-      menuItems: [],
+      menuItems: [
-    },
+        {
-    {
+          title: "فایل‌های مربوط به پارسال",
-      name: "صوت جلسات استاد براتی",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
-      menuItems: [],
+        },
+        {
+          title: "اخبار و گزارشات سال 1399",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+        {
+          title: "فایل‌های مربوط به پارسال",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+      ],
     },
     {
-      name: "رویشه اصلی سایت",
+      name: "فیلم‌ها وعکس مربوط به حادثه",
-      menuItems: [],
+      menuItems: [
+        {
+          title: "فایل‌های مربوط به پارسال",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+        {
+          title: "اخبار و گزارشات سال 1399",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+        {
+          title: "فایل‌های مربوط به پارسال",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+      ],
     },
     {
-      name: "فرایند‌های بازرسی",
+      name: "فیلم‌ها وعکس مربوط به حادثه",
-      menuItems: [],
+      menuItems: [
+        {
+          title: "فایل‌های مربوط به پارسال",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+        {
+          title: "اخبار و گزارشات سال 1399",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+        {
+          title: "فایل‌های مربوط به پارسال",
+          menuSubItems: [{ subTitle: "فرایند‌های بازرسی" }],
+        },
+      ],
     },
   ],
 };