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.
238 lines
8.1 KiB
238 lines
8.1 KiB
// it has style inside index.scss ---> // Start Sidebar/SidebarDesign2 && end Sidebar/SidebarDesign2 |
|
|
|
import React, { useState } from "react"; |
|
import SearchBox from "../../SearchBox"; |
|
|
|
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="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> |
|
{/* 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" /> |
|
<p className="text-blue-800 text-sm flex-1 mr-2"> |
|
{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}`} |
|
> |
|
<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: "images/home-2.svg", |
|
title: "صفحه اصلی", |
|
borderRadius: "rounded", |
|
backgroundColor: "bg-gray-200", |
|
borderColor: "border-gray-200", |
|
notification: "8+", |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: "images/square.svg", |
|
title: "داشبود من", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: "images/notification.svg", |
|
title: "مرکز اعلانات", |
|
borderRadius: "rounded-full", |
|
backgroundColor: "bg-transparent", |
|
borderColor: "border-gray-200", |
|
notification: "+8", |
|
menuSubItems: [], |
|
}, |
|
], |
|
}, |
|
{ |
|
title: "حسابداری و مالی", |
|
menuItems: [ |
|
{ |
|
icon: "images/Vector44.svg", |
|
title: "کیف پول", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
leftIcon: "images/arrow-down12.svg", |
|
menuSubItems: [ |
|
{ title: "کوپن ها", leftIcon: "images/arrow-down12.svg" }, |
|
{ title: "رسید ها", leftIcon: "images/arrow-down12.svg" }, |
|
{ title: "صندوق", leftIcon: "images/arrow-down12.svg" }, |
|
], |
|
}, |
|
{ |
|
icon: "images/arrow-down12.svg", |
|
title: "کوپن ها", |
|
borderRadius: "rounded-full", |
|
backgroundColor: "bg-transparent", |
|
borderColor: "border-gray-200", |
|
notification: "+", |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: "images/receipt-texdst.svg", |
|
title: "رسید ها", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
], |
|
}, |
|
{ |
|
title: "حساب کاربری", |
|
menuItems: [ |
|
{ |
|
icon: "images/profile-pic22.svg", |
|
title: "حساب کاربری", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: "images/setting222.svg", |
|
title: "تنظیمات", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
{ |
|
icon: "images/logout22.svg", |
|
title: "خروج از حساب کاربری", |
|
borderRadius: null, |
|
backgroundColor: null, |
|
borderColor: null, |
|
notification: null, |
|
menuSubItems: [], |
|
}, |
|
], |
|
}, |
|
], |
|
|
|
username: "رستم پهلوان زاده", |
|
userJob: "مدیریت سامانه هوشمند", |
|
};
|
|
|