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.
231 lines
6.9 KiB
231 lines
6.9 KiB
3 years ago
|
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>
|
||
|
))} */
|
||
|
}
|