// 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 search from "./search-normal.svg";
import notification from "./notification.svg";
const SidebarMenu = ({ items, buttons, username, userJob, className }) => {
const [activeDropdown, setActiveDropdown] = useState(null);
return (
{/* profile */}
{/* search box */}
{/* items */}
{items.map((item, i) => (
{item.title}
{/* menu items */}
{item.menuItems.map((menuItem, index) => (
{/* right active border */}
{/* left content */}
setActiveDropdown(
activeDropdown === menuItem ? null : menuItem
)
}
>
{menuItem.title}
{menuItem.notification && (
{menuItem.notification}
)}
{menuItem.leftIcon && (

)}
{/* menuSubItems */}
{activeDropdown === menuItem &&
menuItem.menuSubItems.map((menuSubItem, j) => (
-
setActiveDropdown(menuSubItem)}
>
{menuSubItem.title}
))}
))}
{Number(i) !== items.length - 1 && (
)}
))}
{/* blue left border */}
{/*
*/}
);
};
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: "مدیریت سامانه هوشمند",
};