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.
		
		
		
		
		
			
		
			
				
					
					
						
							159 lines
						
					
					
						
							5.1 KiB
						
					
					
				
			
		
		
	
	
							159 lines
						
					
					
						
							5.1 KiB
						
					
					
				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 }, | 
						|
  ], | 
						|
};
 | 
						|
 |