// it has style inside index.scss ---> // Start Sidebar/SidebarMenu && end Sidebar/SidebarMenu import React from "react"; import Switch from "../../Switch"; import downwardArrow from "./arrow-down.svg"; import profilePic from "./profile-pic.svg"; import logout from "./logout.svg"; import messageText from "./message-text.svg"; import moon from "./moon.svg"; import sms from "./sms.svg"; const COMPONENTS = { Switch: , }; const SidebarMenu = ({ items, buttons }) => { return (
{/* profile */}

کامران کوهستانی شیرازی

arrow
{/* divider */}

منوی کاربری

{/* items */} {items.map((item, index) => (
{/* menu items */}

{item.title}

{item.notification && (
{item.notification}
)}
{/* sub items */} {item.subItems.map((subItem, i) => (
{subItem.name && (

{subItem.name}

)} {subItem.num && (
{subItem.num}
)}
))}
))} {/* buttons */} {buttons.map((button, i) => (
{/* divider */}

{button.title}

{/* من اینجا ۲ حالت در نظر گرفتم که یا میتونه عکس باشه یا یک کامپوننت به این دلیل که اون سویییچ را داخل یک کامپوننت دیگه درست کردم برای همین یا میشه بهش کامپوننت بدیم به عکس */} {button.component ? ( COMPONENTS[button.component] ) : ( )}
))}
); }; export default SidebarMenu; SidebarMenu.defaultProps = { items: [ { icon: "/images/element-4.svg", title: "داشبورد مدیریت", notification: null, subItems: [], }, { icon: "/images/folder-open.svg", title: "پروژه ها", notification: null, subItems: [ { name: "افزدون پروژه", num: null }, { name: "مدیریت پروژه ها", num: null }, { name: "پروژه های حذف شده", num: null }, ], }, { icon: "/images/wallet-money.svg", title: "مالی و حسابداری", notification: null, subItems: [ { name: "تمدید سرویس", num: null }, { name: "بسته های اشتراکی", num: null }, { name: "فاکتور ها", num: 1 }, { name: "درخواست تسویه حساب", num: null }, ], }, { icon: "/images/user-edit.svg", title: "دیدگاه ها", notification: null, subItems: [], }, { icon: "/images/user-edit.svg", title: "حساب کاربری", notification: null, subItems: [{ name: "ویرایش حساب کاربری", num: null }], }, { icon: sms, title: "پشتیبانی", notification: 7, subItems: [ { name: "تیکت ها", num: null }, { name: "ارسال تیکت جدید", num: null }, { name: "ویکی", num: null }, ], }, { icon: messageText, title: "متستندات", notification: null, subItems: [{ name: "API توسعه دهندگان", num: null }], }, ], buttons: [ { icon: moon, title: "حالت شب", leftIcon: null, component: "Switch" }, { icon: logout, title: "خروج از حساب کاربری", leftIcon: logout, component: null, }, ], };