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.
 
 
 

166 lines
5.6 KiB

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