|
After Width: | Height: | Size: 499 B |
|
After Width: | Height: | Size: 434 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,159 @@ |
||||
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 mx-2"> |
||||
کامران کوهستانی شیرازی |
||||
</p> |
||||
<img src={downwardArrow} alt="" className="w-5" /> |
||||
</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="" /> |
||||
<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 }, |
||||
], |
||||
}; |
||||
@ -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 */ |
||||
} |
||||
|
After Width: | Height: | Size: 943 B |
|
After Width: | Height: | Size: 874 B |
|
After Width: | Height: | Size: 597 B |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 755 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,13 @@ |
||||
import React from "react"; |
||||
import "./index.scss"; |
||||
|
||||
const Switch = () => { |
||||
return ( |
||||
<div className="switch"> |
||||
<input type="checkbox" id="toggle" /> |
||||
<label for="toggle"></label> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default Switch; |
||||
@ -0,0 +1,52 @@ |
||||
// *, *:after, *:before { |
||||
// // box-sizing: border-box; |
||||
// } |
||||
|
||||
// body { |
||||
// min-height: 100vh; |
||||
// display: flex; |
||||
// align-items: center; |
||||
// justify-content: center; |
||||
// } |
||||
|
||||
.switch { |
||||
position: relative; |
||||
input[type="checkbox"] { |
||||
visibility: hidden; |
||||
position : absolute; |
||||
&:checked + label { |
||||
transform: rotate(0deg); |
||||
background-color: #000; |
||||
&:before { |
||||
transform: translateX(35.5px); |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
label { |
||||
display: flex; |
||||
width: 70px; |
||||
height: 34px; |
||||
border: 3px solid; |
||||
border-radius: 99em; |
||||
position: relative; |
||||
transition: transform 0.3s ease-in-out; |
||||
transform-origin: 50% 50%; |
||||
cursor: pointer; |
||||
|
||||
&:before { |
||||
transition: transform 0.3s ease; |
||||
transition-delay: 0s; |
||||
content: ""; |
||||
display: block; |
||||
position: absolute; |
||||
width: 24px; |
||||
height: 24px; |
||||
background-color: #000; |
||||
border-radius: 50%; |
||||
top: 2px; |
||||
left: 3px; |
||||
} |
||||
} |
||||
} |
||||