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.
230 lines
6.9 KiB
230 lines
6.9 KiB
import React from "react"; |
|
|
|
import "./index.scss"; |
|
|
|
import downwardArrow from "./arrow-down.svg"; |
|
import profilePic from "./profile-pic.svg"; |
|
import home from "./home-2.svg"; |
|
import square from "./square.svg"; |
|
import wallet from "./wallet-3.svg"; |
|
import discount from "./discount-shape.svg"; |
|
import receipt from "./receipt-text.svg"; |
|
import profileIcon from "./profilee.svg"; |
|
import setting from "./setting.svg"; |
|
import logout from "./logout.svg"; |
|
import search from "./search-normal.svg"; |
|
import notification from "./notification.svg"; |
|
|
|
import Switch from "../../Switch"; |
|
|
|
const SidebarMenu = ({ items, buttons, username, userJob }) => { |
|
return ( |
|
<section> |
|
<div |
|
style={{ width: "20%" }} |
|
className="bg-white p-5 h-screen shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar" |
|
> |
|
{/* profile */} |
|
<div className="flex flex-row items-center"> |
|
<img src={profilePic} alt="" className="w-12 rounded-full" /> |
|
<div className="flex flex-col flex-1 mr-3"> |
|
<p className="text-blue-900 text-sm">{username}</p> |
|
<p className="text-blue-700 text-xs">{userJob}</p> |
|
</div> |
|
<img src={downwardArrow} alt="" className="w-5 cursor-pointer" /> |
|
</div> |
|
{/* search box */} |
|
<div className="flex flex-row-reverse items-center relative w-full my-6"> |
|
<img |
|
src={search} |
|
alt="" |
|
className="w-5 h-5 absolute left-3 cursor-pointer" |
|
/> |
|
<input |
|
type="text" |
|
placeholder="جستجو در منو کاربری..." |
|
className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300" |
|
/> |
|
</div> |
|
{/* items */} |
|
{items.map((item, i) => ( |
|
<div className="flex flex-col item-center" key={i}> |
|
<p className="text-xs text-blue-800 my-2">{item.title}</p> |
|
{/* menu items */} |
|
{item.menuItems.map((menuItem, index) => ( |
|
<div |
|
key={i} |
|
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" |
|
> |
|
<img src={menuItem.icon} alt="" className="w-7 h-7" /> |
|
<p className="text-blue-800 text-sm flex-1 mx-2"> |
|
{menuItem.title} |
|
</p> |
|
{menuItem.notification && ( |
|
<div |
|
className={`w-7 h-7 text-center flex flex-col items-center justify-center border-2 ${menuItem.borderRadius} ${menuItem.backgroundColor} ${menuItem.borderColor}`} |
|
> |
|
<span className=" text-blue-400 text-xs"> |
|
{menuItem.notification} |
|
</span> |
|
</div> |
|
)} |
|
</div> |
|
))} |
|
|
|
<div className="border border-gray-100 my-2"></div> |
|
</div> |
|
))} |
|
</div> |
|
</section> |
|
); |
|
}; |
|
|
|
export default SidebarMenu; |
|
|
|
SidebarMenu.defaultProps = { |
|
items: [ |
|
{ |
|
title: "منوی کاربری برای شما", |
|
menuItems: [ |
|
{ |
|
icon: home, |
|
title: "صفحه اصلی", |
|
borderRadius: "rounded", |
|
backgroundColor: "bg-gray-200", |
|
borderColor: "border-gray-200", |
|
notification: "8+", |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: square, |
|
title: "داشبود من", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: notification, |
|
title: "مرکز اعلانات", |
|
borderRadius: "rounded-full", |
|
backgroundColor: "bg-transparent", |
|
borderColor: "border-gray-200", |
|
notification: "+8", |
|
menuSubItems: [], |
|
}, |
|
], |
|
}, |
|
{ |
|
title: "حسابداری و مالی", |
|
menuItems: [ |
|
{ |
|
icon: wallet, |
|
title: "کیف پول", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: discount, |
|
title: "کوپن ها", |
|
borderRadius: "rounded-full", |
|
backgroundColor: "bg-transparent", |
|
borderColor: "border-gray-200", |
|
notification: "+", |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: receipt, |
|
title: "رسید ها", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
], |
|
}, |
|
{ |
|
title: "حسابداری و مالی", |
|
menuItems: [ |
|
{ |
|
icon: profileIcon, |
|
title: "حساب کاربری", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: setting, |
|
title: "تنظیمات", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: logout, |
|
title: "خروج از حساب کاربری", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
], |
|
}, |
|
], |
|
// buttons: [ |
|
// { icon: moon, title: "حالت شب", leftIcon: moon }, |
|
// { icon: logout, title: "خروج از حساب کاربری", leftIcon: null }, |
|
// ], |
|
username: "رستم پهلوان زاده", |
|
userJob: "مدیریت سامانه هوشمند", |
|
}; |
|
|
|
// { |
|
// 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> |
|
// )); |
|
// } |
|
|
|
{ |
|
/* 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> |
|
))} */ |
|
}
|
|
|