|
|
|
// it has style inside index.scss ---> // Start Sidebar/SidebarDesign2 && end Sidebar/SidebarDesign2
|
|
|
|
|
|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
import Switch from "../../Switch";
|
|
|
|
import SearchBox from "../../SearchBox";
|
|
|
|
|
|
|
|
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 notification from "./notification.svg";
|
|
|
|
|
|
|
|
const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
|
|
|
|
const [activeDropdown, setActiveDropdown] = useState(null);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={`${className} w-fit bg-white p-4 overflow-y-auto scrollYDesign shadow-sm border border-gray-300 rounded relative`}
|
|
|
|
>
|
|
|
|
{/* profile */}
|
|
|
|
<div className="flex flex-row items-center">
|
|
|
|
<img src={profilePic} alt="profile-pic" className="w-12 rounded-full" />
|
|
|
|
<div className="flex flex-col flex-1 mx-3">
|
|
|
|
<p className="text-blue-900 text-sm">{username}</p>
|
|
|
|
<p className="text-blue-700 text-xs">{userJob}</p>
|
|
|
|
</div>
|
|
|
|
<img src={downwardArrow} alt="arrow" className="w-5 cursor-pointer" />
|
|
|
|
</div>
|
|
|
|
{/* search box */}
|
|
|
|
<SearchBox searchBoxHolder={"my-4"} />
|
|
|
|
{/* 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 className="flex flex-col justify-center" key={index}>
|
|
|
|
<div className="flex flex-row items-center">
|
|
|
|
{/* right active border */}
|
|
|
|
<div
|
|
|
|
className={`absolute right-0 w-1 h-8 rounded transition duration-300 ease-linear ${
|
|
|
|
activeDropdown === menuItem ? "bg-blue-600" : ""
|
|
|
|
}`}
|
|
|
|
></div>
|
|
|
|
{/* left content */}
|
|
|
|
<div
|
|
|
|
className={`flex flex-row flex-1 items-center cursor-pointer hover:bg-blue-100 rounded-md p-2 transition duration-300
|
|
|
|
${activeDropdown === menuItem ? "bg-blue-100" : ""}
|
|
|
|
`}
|
|
|
|
onClick={() =>
|
|
|
|
setActiveDropdown(
|
|
|
|
activeDropdown === menuItem ? null : menuItem
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<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>
|
|
|
|
)}
|
|
|
|
{menuItem.leftIcon && (
|
|
|
|
<img
|
|
|
|
src={menuItem.leftIcon}
|
|
|
|
alt=""
|
|
|
|
className={`${
|
|
|
|
activeDropdown === menuItem ? "rotate-60" : "rotate-90"
|
|
|
|
} `}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* menuSubItems */}
|
|
|
|
{activeDropdown === menuItem &&
|
|
|
|
menuItem.menuSubItems.map((menuSubItem, j) => (
|
|
|
|
<div
|
|
|
|
key={j}
|
|
|
|
className="flex w-10/12 flex-row items-center transition duration-300 ease-linear"
|
|
|
|
style={{
|
|
|
|
transform: "translate(-11%,-9px)",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div className="transition duration-300 ease-linear text-gray-400 border-r-2 border-gray-300">
|
|
|
|
-
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
className="flex flex-row items-center justify-between flex-1 hover:bg-indigo-300 p-1 rounded cursor-pointer transition duration-300 ease-linear"
|
|
|
|
onClick={() => setActiveDropdown(menuSubItem)}
|
|
|
|
>
|
|
|
|
<p className="text-xs transition duration-300">
|
|
|
|
{menuSubItem.title}
|
|
|
|
</p>
|
|
|
|
<img
|
|
|
|
src={menuSubItem.leftIcon}
|
|
|
|
alt=""
|
|
|
|
className={`w-4 cursor-pointer transition duration-300 ${
|
|
|
|
activeDropdown === menuSubItem
|
|
|
|
? "rotate-60"
|
|
|
|
: "rotate-90"
|
|
|
|
}`}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
{Number(i) !== items.length - 1 && (
|
|
|
|
<div className="border border-gray-100 my-2"></div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
{/* blue left border */}
|
|
|
|
{/* <div
|
|
|
|
style={{ bottom: "15%" }}
|
|
|
|
className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 w-1 h-20 rounded"
|
|
|
|
></div> */}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
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,
|
|
|
|
leftIcon: downwardArrow,
|
|
|
|
menuSubItems: [
|
|
|
|
{ title: "کوپن ها", leftIcon: downwardArrow },
|
|
|
|
{ title: "رسید ها", leftIcon: downwardArrow },
|
|
|
|
{ title: "صندوق", leftIcon: downwardArrow },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
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: [],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
],
|
|
|
|
username: "رستم پهلوان زاده",
|
|
|
|
userJob: "مدیریت سامانه هوشمند",
|
|
|
|
};
|