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.
159 lines
5.1 KiB
159 lines
5.1 KiB
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 |
|
style={{ width: "20%" }} |
|
className="bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar" |
|
> |
|
{/* profile */} |
|
<div className="flex flex-row items-center"> |
|
<img src={profilePic} alt="" className="w-12 rounded-full" /> |
|
<p className="text-blue-600 font-bold text-base flex-1 mr-2"> |
|
کامران کوهستانی شیرازی |
|
</p> |
|
<img src={downwardArrow} alt="" className="w-5 cursor-pointer" /> |
|
</div> |
|
{/* divider */} |
|
<div className="border border-gray-200 mt-5"></div> |
|
<p className="text-xs text-gray-400 my-4">منوی کاربری</p> |
|
{/* items */} |
|
{items.map((item, i) => ( |
|
<div className="flex flex-col item-center"> |
|
{/* menu items */} |
|
<div |
|
key={i} |
|
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.leftIcon && <Switch />} |
|
</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: moon }, |
|
{ icon: logout, title: "خروج از حساب کاربری", leftIcon: null }, |
|
], |
|
};
|
|
|