239 lines
8.1 KiB

3 years ago
// it has style inside index.scss ---> // Start Sidebar/SidebarDesign2 && end Sidebar/SidebarDesign2
3 years ago
import React, { useState } from "react";
import SearchBox from "../../SearchBox";
3 years ago
3 years ago
const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
3 years ago
const [activeDropdown, setActiveDropdown] = useState(null);
3 years ago
return (
3 years ago
<div
className={`${className} w-fit bg-white p-4 overflow-y-auto scrollYDesign shadow-sm border border-gray-300 rounded relative`}
3 years ago
>
{/* profile */}
<div className="flex flex-row items-center">
<img
src="images/profile-pic.svg"
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="images/arrow-down12.svg"
alt="arrow"
className="w-5 cursor-pointer"
/>
</div>
3 years ago
{/* search box */}
<SearchBox searchBoxHolder={"my-4"} />
3 years ago
{/* 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}>
3 years ago
<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 ${
3 years ago
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
3 years ago
${activeDropdown === menuItem ? "bg-blue-100" : ""}
`}
3 years ago
onClick={() =>
setActiveDropdown(
activeDropdown === menuItem ? null : menuItem
)
}
>
<img src={menuItem.icon} alt="" className="w-7" />
<p className="text-blue-800 text-sm flex-1 mr-2">
3 years ago
{menuItem.title}
</p>
{menuItem.notification && (
<div
className={`w-7 flex flex-col items-center justify-center text-center border-2 ${menuItem.borderRadius} ${menuItem.backgroundColor} ${menuItem.borderColor}`}
3 years ago
>
<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"
3 years ago
style={{
transform: "translate(-11%,-9px)",
3 years ago
}}
3 years ago
>
<div className="transition duration-300 ease-linear text-gray-400 border-r-2 border-gray-300">
3 years ago
-
</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"
3 years ago
onClick={() => setActiveDropdown(menuSubItem)}
>
<p className="text-xs transition duration-300">
{menuSubItem.title}
</p>
3 years ago
<img
3 years ago
src={menuSubItem.leftIcon}
3 years ago
alt=""
3 years ago
className={`w-4 cursor-pointer transition duration-300 ${
activeDropdown === menuSubItem
3 years ago
? "rotate-60"
3 years ago
: "rotate-90"
3 years ago
}`}
3 years ago
/>
3 years ago
</div>
3 years ago
</div>
))}
</div>
))}
{Number(i) !== items.length - 1 && (
<div className="border border-gray-100 my-2"></div>
)}
</div>
))}
{/* blue left border */}
{/* <div
3 years ago
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> */}
3 years ago
</div>
3 years ago
);
};
export default SidebarMenu;
SidebarMenu.defaultProps = {
items: [
{
title: "منوی کاربری برای شما",
menuItems: [
{
icon: "images/home-2.svg",
3 years ago
title: "صفحه اصلی",
borderRadius: "rounded",
backgroundColor: "bg-gray-200",
borderColor: "border-gray-200",
notification: "8+",
menuSubItems: [],
},
{
icon: "images/square.svg",
3 years ago
title: "داشبود من",
borderRadius: null,
backgroundColor: null,
borderColor: null,
notification: null,
menuSubItems: [],
},
{
icon: "images/notification.svg",
3 years ago
title: "مرکز اعلانات",
borderRadius: "rounded-full",
backgroundColor: "bg-transparent",
borderColor: "border-gray-200",
notification: "+8",
menuSubItems: [],
},
],
},
{
title: "حسابداری و مالی",
menuItems: [
{
icon: "images/Vector44.svg",
3 years ago
title: "کیف پول",
borderRadius: null,
backgroundColor: null,
borderColor: null,
notification: null,
leftIcon: "images/arrow-down12.svg",
3 years ago
menuSubItems: [
{ title: "کوپن ها", leftIcon: "images/arrow-down12.svg" },
{ title: "رسید ها", leftIcon: "images/arrow-down12.svg" },
{ title: "صندوق", leftIcon: "images/arrow-down12.svg" },
3 years ago
],
3 years ago
},
{
icon: "images/arrow-down12.svg",
3 years ago
title: "کوپن ها",
borderRadius: "rounded-full",
backgroundColor: "bg-transparent",
borderColor: "border-gray-200",
notification: "+",
menuSubItems: [],
},
{
icon: "images/receipt-texdst.svg",
3 years ago
title: "رسید ها",
borderRadius: null,
backgroundColor: null,
borderColor: null,
notification: null,
menuSubItems: [],
},
],
},
{
3 years ago
title: "حساب کاربری",
3 years ago
menuItems: [
{
icon: "images/profile-pic22.svg",
3 years ago
title: "حساب کاربری",
borderRadius: null,
backgroundColor: null,
borderColor: null,
notification: null,
menuSubItems: [],
},
{
icon: "images/setting222.svg",
3 years ago
title: "تنظیمات",
borderRadius: null,
backgroundColor: null,
borderColor: null,
notification: null,
menuSubItems: [],
},
{
icon: "images/logout22.svg",
3 years ago
title: "خروج از حساب کاربری",
borderRadius: null,
backgroundColor: null,
borderColor: null,
notification: null,
menuSubItems: [],
},
],
},
],
3 years ago
username: "رستم پهلوان زاده",
userJob: "مدیریت سامانه هوشمند",
};