You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

171 lines
5.5 KiB

3 years ago
// it has style inside index.scss ---> // Start Sidebar/SidebarMenu && end Sidebar/SidebarMenu
3 years ago
import React from "react";
import Switch from "../../Switch";
3 years ago
3 years ago
const COMPONENTS = {
Switch: <Switch />,
};
3 years ago
const SidebarMenu = ({ items, buttons }) => {
return (
<section>
<div className="w-fit bg-white p-4 shadow-sm border border-gray-300 rounded overflow-y-auto scrollYDesign">
3 years ago
{/* profile */}
<div className="flex flex-row items-center">
<img
src="/images/profile-pic.svg"
alt=""
className="w-12 rounded-full"
/>
<p className="flex-1 text-base text-blue-600 font-sansbold mx-2">
3 years ago
کامران کوهستانی شیرازی
</p>
<img
src="/images/arrow-down.svg"
alt="arrow"
className="w-4 cursor-pointer"
/>
3 years ago
</div>
{/* divider */}
<div className="border border-gray-200 my-5"></div>
<p className="text-xs text-gray-400 mb-2">منوی کاربری</p>
3 years ago
{/* items */}
{items.map((item, index) => (
<div className="flex flex-col item-center" key={index}>
3 years ago
{/* menu items */}
<div className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2">
3 years ago
<img src={item.icon} alt="" className="w-5 h-5" />
3 years ago
<p className="text-blue-600 text-sm flex-1 mx-2">{item.title}</p>
{item.notification && (
<div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center">
<span className=" text-white text-xs">
{item.notification}
</span>
</div>
)}
</div>
{/* sub items */}
{item.subItems.map((subItem, i) => (
<div
key={i}
className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2"
>
{subItem.name && (
<p className="text-gray-400 text-xs flex-1 mr-4">
{subItem.name}
</p>
)}
{subItem.num && (
<div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center">
<span className=" text-white text-xs">{subItem.num}</span>
</div>
)}
</div>
))}
</div>
))}
{/* buttons */}
{buttons.map((button, i) => (
<div className="flex flex-col item-center">
{/* divider */}
<div className="border border-gray-200 my-1"></div>
<div
key={i}
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2"
>
<img src={button.icon} alt="" />
<p className="text-blue-600 text-sm flex-1 mx-2">
{button.title}
</p>
{/* من اینجا ۲ حالت در نظر گرفتم که یا میتونه عکس باشه یا یک کامپوننت به این دلیل که اون سویییچ را داخل یک کامپوننت دیگه درست کردم برای همین یا میشه بهش کامپوننت بدیم به عکس */}
{button.component ? (
3 years ago
COMPONENTS[button.component]
) : (
<img src={button.leftIcon} alt="" />
)}
3 years ago
</div>
</div>
))}
</div>
</section>
);
};
export default SidebarMenu;
SidebarMenu.defaultProps = {
items: [
{
icon: "/images/element-4.svg",
3 years ago
title: "داشبورد مدیریت",
notification: null,
subItems: [],
},
{
icon: "/images/folder-open.svg",
3 years ago
title: "پروژه ها",
notification: null,
subItems: [
{ name: "افزدون پروژه", num: null },
{ name: "مدیریت پروژه ها", num: null },
{ name: "پروژه های حذف شده", num: null },
],
},
{
icon: "/images/wallet-money.svg",
3 years ago
title: "مالی و حسابداری",
notification: null,
subItems: [
{ name: "تمدید سرویس", num: null },
{ name: "بسته های اشتراکی", num: null },
{ name: "فاکتور ها", num: 1 },
{ name: "درخواست تسویه حساب", num: null },
],
},
{
icon: "/images/user-edit.svg",
3 years ago
title: "دیدگاه ها",
notification: null,
subItems: [],
},
{
icon: "/images/user-edit.svg",
3 years ago
title: "حساب کاربری",
notification: null,
subItems: [{ name: "ویرایش حساب کاربری", num: null }],
},
{
icon: "/images/sms.svg",
3 years ago
title: "پشتیبانی",
notification: 7,
subItems: [
{ name: "تیکت ها", num: null },
{ name: "ارسال تیکت جدید", num: null },
{ name: "ویکی", num: null },
],
},
{
icon: "/images/message-text.svg",
3 years ago
title: "متستندات",
notification: null,
subItems: [{ name: "API توسعه دهندگان", num: null }],
},
],
3 years ago
buttons: [
{
icon: "/images/moon.svg",
title: "حالت شب",
leftIcon: null,
component: "Switch",
},
{
icon: "/images/logout.svg",
title: "خروج از حساب کاربری",
leftIcon: "/images/logout.svg",
component: null,
},
3 years ago
],
};