// it has style inside index.scss ---> // Start Sidebar/SidebarMenu && end Sidebar/SidebarMenu import React from "react"; import "./index.scss"; import downwardArrow from "./arrow-down.svg"; import profilePic from "./profile-pic.svg"; import element from "./element-4.svg"; import folderOpen from "./folder-open.svg"; import wallet from "./wallet-money.svg"; import logout from "./logout.svg"; import messageText from "./message-text.svg"; import moon from "./moon.svg"; import sms from "./sms.svg"; import userEdit from "./user-edit.svg"; import Switch from "../../Switch"; const SidebarMenu = ({ items, buttons }) => { return ( <section> <div style={{ width: "20%" }} className="bg-white p-5 h-screen shadow-sm border border-gray-300 rounded overflow-y-scroll no-scrollbar" > {/* profile */} <div className="flex flex-row items-center"> <img src={profilePic} alt="" className="w-12 rounded-full" /> <p className="text-blue-600 font-bold text-base flex-1 mr-2"> کامران کوهستانی شیرازی </p> <img src={downwardArrow} alt="" className="w-5 cursor-pointer" /> </div> {/* divider */} <div className="border border-gray-200 mt-5"></div> <p className="text-xs text-gray-400 my-4">منوی کاربری</p> {/* items */} {items.map((item, i) => ( <div className="flex flex-col item-center"> {/* menu items */} <div key={i} className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" > <img src={item.icon} alt="" className="w-5 h-5" /> <p className="text-blue-600 text-sm flex-1 mx-2">{item.title}</p> {item.notification && ( <div className=" w-6 h-6 bg-blue-700 text-center rounded-full flex flex-col items-center justify-center"> <span className=" text-white text-xs"> {item.notification} </span> </div> )} </div> {/* sub items */} {item.subItems.map((subItem, i) => ( <div key={i} className="flex flex-row items-center cursor-pointer hover:bg-gray-100 rounded-md p-2" > {subItem.name && ( <p className="text-gray-400 text-xs flex-1 mr-4"> {subItem.name} </p> )} {subItem.num && ( <div className=" w-6 h-6 bg-yellow-400 text-center rounded-full flex flex-col items-center justify-center"> <span className=" text-white text-xs">{subItem.num}</span> </div> )} </div> ))} </div> ))} {/* buttons */} {buttons.map((button, i) => ( <div className="flex flex-col item-center"> {/* divider */} <div className="border border-gray-200 my-1"></div> <div key={i} className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" > <img src={button.icon} alt="" /> <p className="text-blue-600 text-sm flex-1 mx-2"> {button.title} </p> {button.leftIcon && <Switch />} </div> </div> ))} </div> </section> ); }; export default SidebarMenu; SidebarMenu.defaultProps = { items: [ { icon: element, title: "داشبورد مدیریت", notification: null, subItems: [], }, { icon: folderOpen, title: "پروژه ها", notification: null, subItems: [ { name: "افزدون پروژه", num: null }, { name: "مدیریت پروژه ها", num: null }, { name: "پروژه های حذف شده", num: null }, ], }, { icon: wallet, title: "مالی و حسابداری", notification: null, subItems: [ { name: "تمدید سرویس", num: null }, { name: "بسته های اشتراکی", num: null }, { name: "فاکتور ها", num: 1 }, { name: "درخواست تسویه حساب", num: null }, ], }, { icon: userEdit, title: "دیدگاه ها", notification: null, subItems: [], }, { icon: userEdit, title: "حساب کاربری", notification: null, subItems: [{ name: "ویرایش حساب کاربری", num: null }], }, { icon: sms, title: "پشتیبانی", notification: 7, subItems: [ { name: "تیکت ها", num: null }, { name: "ارسال تیکت جدید", num: null }, { name: "ویکی", num: null }, ], }, { icon: messageText, title: "متستندات", notification: null, subItems: [{ name: "API توسعه دهندگان", num: null }], }, ], buttons: [ { icon: moon, title: "حالت شب", leftIcon: moon }, { icon: logout, title: "خروج از حساب کاربری", leftIcon: null }, ], };