diff --git a/src/App.js b/src/App.js index 4a94e49..f45dd1c 100644 --- a/src/App.js +++ b/src/App.js @@ -34,6 +34,8 @@ import AdvertisementDesign1 from "./components/Advertisement/design1"; import AdvertisementDesign2 from "./components/Advertisement/design2"; import AdvertisementDesign3 from "./components/Advertisement/design3"; import CourseChapter from "./components/CourseChapter"; +import SidebarMenu from "./components/SidebarMenu"; +import Switch from "./components/Switch"; function App() { return ( @@ -65,11 +67,12 @@ function App() { {/* */} {/* */} {/* */} - - - - - + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + ); diff --git a/src/components/SidebarMenu/Vector.svg b/src/components/SidebarMenu/Vector.svg new file mode 100644 index 0000000..2940c95 --- /dev/null +++ b/src/components/SidebarMenu/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/SidebarMenu/arrow-down.svg b/src/components/SidebarMenu/arrow-down.svg new file mode 100644 index 0000000..d05315f --- /dev/null +++ b/src/components/SidebarMenu/arrow-down.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/SidebarMenu/element-4.svg b/src/components/SidebarMenu/element-4.svg new file mode 100644 index 0000000..2132509 --- /dev/null +++ b/src/components/SidebarMenu/element-4.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/SidebarMenu/folder-open.svg b/src/components/SidebarMenu/folder-open.svg new file mode 100644 index 0000000..9d7fe32 --- /dev/null +++ b/src/components/SidebarMenu/folder-open.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/SidebarMenu/index.js b/src/components/SidebarMenu/index.js new file mode 100644 index 0000000..977a2c3 --- /dev/null +++ b/src/components/SidebarMenu/index.js @@ -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 ( +
+
+ {/* profile */} +
+ +

+ کامران کوهستانی شیرازی +

+ +
+ {/* divider */} +
+

منوی کاربری

+ {/* items */} + {items.map((item, i) => ( +
+ {/* menu items */} +
+ +

{item.title}

+ {item.notification && ( +
+ + {item.notification} + +
+ )} +
+ {/* sub items */} + {item.subItems.map((subItem, i) => ( +
+ {subItem.name && ( +

+ {subItem.name} +

+ )} + {subItem.num && ( +
+ {subItem.num} +
+ )} +
+ ))} +
+ ))} + {/* buttons */} + {buttons.map((button, i) => ( +
+ {/* divider */} +
+
+ +

+ {button.title} +

+ {button.leftIcon && } +
+
+ ))} +
+
+ ); +}; + +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 }, + ], +}; diff --git a/src/components/SidebarMenu/index.scss b/src/components/SidebarMenu/index.scss new file mode 100644 index 0000000..f0bf785 --- /dev/null +++ b/src/components/SidebarMenu/index.scss @@ -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 */ +} diff --git a/src/components/SidebarMenu/logout.svg b/src/components/SidebarMenu/logout.svg new file mode 100644 index 0000000..94c72a1 --- /dev/null +++ b/src/components/SidebarMenu/logout.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/SidebarMenu/message-text.svg b/src/components/SidebarMenu/message-text.svg new file mode 100644 index 0000000..cf188b0 --- /dev/null +++ b/src/components/SidebarMenu/message-text.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/SidebarMenu/moon.svg b/src/components/SidebarMenu/moon.svg new file mode 100644 index 0000000..ca740b6 --- /dev/null +++ b/src/components/SidebarMenu/moon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/SidebarMenu/profile-pic.svg b/src/components/SidebarMenu/profile-pic.svg new file mode 100644 index 0000000..a51292a --- /dev/null +++ b/src/components/SidebarMenu/profile-pic.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/SidebarMenu/sms.svg b/src/components/SidebarMenu/sms.svg new file mode 100644 index 0000000..642cf99 --- /dev/null +++ b/src/components/SidebarMenu/sms.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/SidebarMenu/user-edit.svg b/src/components/SidebarMenu/user-edit.svg new file mode 100644 index 0000000..60a9d85 --- /dev/null +++ b/src/components/SidebarMenu/user-edit.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/SidebarMenu/wallet-money.svg b/src/components/SidebarMenu/wallet-money.svg new file mode 100644 index 0000000..68de02d --- /dev/null +++ b/src/components/SidebarMenu/wallet-money.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js new file mode 100644 index 0000000..9e9d48e --- /dev/null +++ b/src/components/Switch/index.js @@ -0,0 +1,13 @@ +import React from "react"; +import "./index.scss"; + +const Switch = () => { + return ( +
+ + +
+ ); +}; + +export default Switch; diff --git a/src/components/Switch/index.scss b/src/components/Switch/index.scss new file mode 100644 index 0000000..9f74f26 --- /dev/null +++ b/src/components/Switch/index.scss @@ -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; + } + } +}