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 === null && <img src={item.icon} />} */}
{/* روش دوم */} {/* روش دوم */}
{activeDropdown === item ? ( {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 ? ( {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" }}> <span className="text-sm mr-2" style={{ color: "#00253A" }}>
{item.name} {item.name}
</span> </span>
</div> </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>
))} ))}
</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; export default FolderTree;
FolderTree.defaultProps = { FolderTree.defaultProps = {
@ -66,26 +119,70 @@ FolderTree.defaultProps = {
{ {
name: "فیلمها وعکس مربوط به حادثه", name: "فیلمها وعکس مربوط به حادثه",
menuItems: [ 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: "فرایندهای بازرسی" }],
},
],
}, },
], ],
}; };

Loading…
Cancel
Save