import React, { useState } from "react"; import "./index.scss"; 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"; import Switch from "../../Switch"; const SidebarMenu = ({ items, buttons, username, userJob }) => { const [activeDropdown, setActiveDropdown] = useState(null); return (
{/* profile */}

{username}

{userJob}

{/* search box */}
{/* items */} {items.map((item, i) => (

{item.title}

{/* menu items */} {item.menuItems.map((menuItem, index) => (
{/* right active border */}
{/* left content */}
setActiveDropdown(menuItem)} >

{menuItem.title}

{menuItem.notification && (
{menuItem.notification}
)} {menuItem.leftIcon && ( )}
{/* menuSubItems */} {activeDropdown === menuItem && menuItem.menuSubItems.map((menuSubItem, j) => (
-
setActiveDropdown(menuSubItem)} >

{menuSubItem.title}

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