// 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 (
{/* profile */}
profile-pic

{username}

{userJob}

arrow
{/* 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: "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: "مدیریت سامانه هوشمند", };