master
mahdi andalib 3 years ago
parent 032291db96
commit e0302c3e24
  1. 159
      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) => (
<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>
))}
{activeDropdown === item &&
item.menuItems.map((menuItem, i) => (
<div>
<button
onClick={() =>
setActiveDropdown(
activeDropdown === menuItem ? null : menuItem
)
}
className="transform translate-x-10"
>
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: "فرایندهای بازرسی",
menuItems: [],
},
{
name: "صوت جلسات استاد براتی",
menuItems: [],
name: "فیلمها وعکس مربوط به حادثه",
menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
},
{
name: "رویشه اصلی سایت",
menuItems: [],
name: "فیلمها وعکس مربوط به حادثه",
menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
},
{
name: "فرایندهای بازرسی",
menuItems: [],
name: "فیلمها وعکس مربوط به حادثه",
menuItems: [
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "اخبار و گزارشات سال 1399",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
{
title: "فایلهای مربوط به پارسال",
menuSubItems: [{ subTitle: "فرایندهای بازرسی" }],
},
],
},
],
};

Loading…
Cancel
Save