|
Before Width: | Height: | Size: 499 B After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 448 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 704 B |
@ -0,0 +1,230 @@ |
||||
import React 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 }) => { |
||||
return ( |
||||
<section> |
||||
<div |
||||
style={{ width: "20%" }} |
||||
className="bg-white p-5 h-screen shadow-sm border border-gray-300 overflow-y-scroll no-scrollbar" |
||||
> |
||||
{/* profile */} |
||||
<div className="flex flex-row items-center"> |
||||
<img src={profilePic} alt="" className="w-12 rounded-full" /> |
||||
<div className="flex flex-col flex-1 mr-3"> |
||||
<p className="text-blue-900 text-sm">{username}</p> |
||||
<p className="text-blue-700 text-xs">{userJob}</p> |
||||
</div> |
||||
<img src={downwardArrow} alt="" className="w-5 cursor-pointer" /> |
||||
</div> |
||||
{/* search box */} |
||||
<div className="flex flex-row-reverse items-center relative w-full my-6"> |
||||
<img |
||||
src={search} |
||||
alt="" |
||||
className="w-5 h-5 absolute left-3 cursor-pointer" |
||||
/> |
||||
<input |
||||
type="text" |
||||
placeholder="جستجو در منو کاربری..." |
||||
className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300" |
||||
/> |
||||
</div> |
||||
{/* items */} |
||||
{items.map((item, i) => ( |
||||
<div className="flex flex-col item-center" key={i}> |
||||
<p className="text-xs text-blue-800 my-2">{item.title}</p> |
||||
{/* menu items */} |
||||
{item.menuItems.map((menuItem, index) => ( |
||||
<div |
||||
key={i} |
||||
className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" |
||||
> |
||||
<img src={menuItem.icon} alt="" className="w-7 h-7" /> |
||||
<p className="text-blue-800 text-sm flex-1 mx-2"> |
||||
{menuItem.title} |
||||
</p> |
||||
{menuItem.notification && ( |
||||
<div |
||||
className={`w-7 h-7 text-center flex flex-col items-center justify-center border-2 ${menuItem.borderRadius} ${menuItem.backgroundColor} ${menuItem.borderColor}`} |
||||
> |
||||
<span className=" text-blue-400 text-xs"> |
||||
{menuItem.notification} |
||||
</span> |
||||
</div> |
||||
)} |
||||
</div> |
||||
))} |
||||
|
||||
<div className="border border-gray-100 my-2"></div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
</section> |
||||
); |
||||
}; |
||||
|
||||
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, |
||||
menuSubItems: [], |
||||
}, |
||||
{ |
||||
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: [], |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
// buttons: [
|
||||
// { icon: moon, title: "حالت شب", leftIcon: moon },
|
||||
// { icon: logout, title: "خروج از حساب کاربری", leftIcon: null },
|
||||
// ],
|
||||
username: "رستم پهلوان زاده", |
||||
userJob: "مدیریت سامانه هوشمند", |
||||
}; |
||||
|
||||
// {
|
||||
// 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>
|
||||
// ));
|
||||
// }
|
||||
|
||||
{ |
||||
/* 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> |
||||
))} */ |
||||
} |
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 646 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 499 B |
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 434 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,9 @@ |
||||
.no-scrollbar::-webkit-scrollbar { |
||||
display: none; |
||||
} |
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */ |
||||
.no-scrollbar { |
||||
-ms-overflow-style: none; /* IE and Edge */ |
||||
scrollbar-width: none; /* Firefox */ |
||||
} |
||||
|
Before Width: | Height: | Size: 943 B After Width: | Height: | Size: 943 B |
|
Before Width: | Height: | Size: 874 B After Width: | Height: | Size: 874 B |
|
Before Width: | Height: | Size: 597 B After Width: | Height: | Size: 597 B |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 755 B After Width: | Height: | Size: 755 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |