From 985baac9aaf42f8b8b5a6dc8e6f1ce857dcaff68 Mon Sep 17 00:00:00 2001 From: mahdi Date: Wed, 26 Jan 2022 16:22:45 +0330 Subject: [PATCH] update --- src/App.js | 7 +- .../SidebarDesign2}/Vector.svg | 0 .../Sidebar/SidebarDesign2/arrow-down.svg | 4 + .../Sidebar/SidebarDesign2/discount-shape.svg | 12 + .../Sidebar/SidebarDesign2/home-2.svg | 5 + .../Sidebar/SidebarDesign2/index.js | 230 ++++++++++++++++++ .../SidebarDesign2}/index.scss | 0 .../Sidebar/SidebarDesign2/logout.svg | 11 + .../Sidebar/SidebarDesign2/notification.svg | 9 + .../Sidebar/SidebarDesign2/profile-pic.svg | 8 + .../Sidebar/SidebarDesign2/profilee.svg | 10 + .../Sidebar/SidebarDesign2/receipt-text.svg | 12 + .../Sidebar/SidebarDesign2/search-normal.svg | 5 + .../Sidebar/SidebarDesign2/setting.svg | 10 + .../Sidebar/SidebarDesign2/square.svg | 10 + .../Sidebar/SidebarDesign2/wallet-3.svg | 10 + src/components/Sidebar/SidebarMenu/Vector.svg | 3 + .../{ => Sidebar}/SidebarMenu/arrow-down.svg | 0 .../{ => Sidebar}/SidebarMenu/element-4.svg | 0 .../{ => Sidebar}/SidebarMenu/folder-open.svg | 0 .../{ => Sidebar}/SidebarMenu/index.js | 8 +- src/components/Sidebar/SidebarMenu/index.scss | 9 + .../{ => Sidebar}/SidebarMenu/logout.svg | 0 .../SidebarMenu/message-text.svg | 0 .../{ => Sidebar}/SidebarMenu/moon.svg | 0 .../{ => Sidebar}/SidebarMenu/profile-pic.svg | 0 .../{ => Sidebar}/SidebarMenu/sms.svg | 0 .../{ => Sidebar}/SidebarMenu/user-edit.svg | 0 .../SidebarMenu/wallet-money.svg | 0 29 files changed, 357 insertions(+), 6 deletions(-) rename src/components/{SidebarMenu => Sidebar/SidebarDesign2}/Vector.svg (100%) create mode 100644 src/components/Sidebar/SidebarDesign2/arrow-down.svg create mode 100644 src/components/Sidebar/SidebarDesign2/discount-shape.svg create mode 100644 src/components/Sidebar/SidebarDesign2/home-2.svg create mode 100644 src/components/Sidebar/SidebarDesign2/index.js rename src/components/{SidebarMenu => Sidebar/SidebarDesign2}/index.scss (100%) create mode 100644 src/components/Sidebar/SidebarDesign2/logout.svg create mode 100644 src/components/Sidebar/SidebarDesign2/notification.svg create mode 100644 src/components/Sidebar/SidebarDesign2/profile-pic.svg create mode 100644 src/components/Sidebar/SidebarDesign2/profilee.svg create mode 100644 src/components/Sidebar/SidebarDesign2/receipt-text.svg create mode 100644 src/components/Sidebar/SidebarDesign2/search-normal.svg create mode 100644 src/components/Sidebar/SidebarDesign2/setting.svg create mode 100644 src/components/Sidebar/SidebarDesign2/square.svg create mode 100644 src/components/Sidebar/SidebarDesign2/wallet-3.svg create mode 100644 src/components/Sidebar/SidebarMenu/Vector.svg rename src/components/{ => Sidebar}/SidebarMenu/arrow-down.svg (100%) rename src/components/{ => Sidebar}/SidebarMenu/element-4.svg (100%) rename src/components/{ => Sidebar}/SidebarMenu/folder-open.svg (100%) rename src/components/{ => Sidebar}/SidebarMenu/index.js (96%) create mode 100644 src/components/Sidebar/SidebarMenu/index.scss rename src/components/{ => Sidebar}/SidebarMenu/logout.svg (100%) rename src/components/{ => Sidebar}/SidebarMenu/message-text.svg (100%) rename src/components/{ => Sidebar}/SidebarMenu/moon.svg (100%) rename src/components/{ => Sidebar}/SidebarMenu/profile-pic.svg (100%) rename src/components/{ => Sidebar}/SidebarMenu/sms.svg (100%) rename src/components/{ => Sidebar}/SidebarMenu/user-edit.svg (100%) rename src/components/{ => Sidebar}/SidebarMenu/wallet-money.svg (100%) diff --git a/src/App.js b/src/App.js index f45dd1c..5071fc5 100644 --- a/src/App.js +++ b/src/App.js @@ -34,7 +34,9 @@ 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 SidebarMenu from "./components/Sidebar/SidebarMenu"; +import SidebarDesign2 from "./components/Sidebar/SidebarDesign2"; + import Switch from "./components/Switch"; function App() { @@ -72,7 +74,8 @@ function App() { {/* */} {/* */} {/* */} - + {/* */} + ); diff --git a/src/components/SidebarMenu/Vector.svg b/src/components/Sidebar/SidebarDesign2/Vector.svg similarity index 100% rename from src/components/SidebarMenu/Vector.svg rename to src/components/Sidebar/SidebarDesign2/Vector.svg diff --git a/src/components/Sidebar/SidebarDesign2/arrow-down.svg b/src/components/Sidebar/SidebarDesign2/arrow-down.svg new file mode 100644 index 0000000..3247f0c --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/arrow-down.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Sidebar/SidebarDesign2/discount-shape.svg b/src/components/Sidebar/SidebarDesign2/discount-shape.svg new file mode 100644 index 0000000..c5ca928 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/discount-shape.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/home-2.svg b/src/components/Sidebar/SidebarDesign2/home-2.svg new file mode 100644 index 0000000..2559b40 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/home-2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/index.js b/src/components/Sidebar/SidebarDesign2/index.js new file mode 100644 index 0000000..6672813 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/index.js @@ -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 ( +
+
+ {/* profile */} +
+ +
+

{username}

+

{userJob}

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

{item.title}

+ {/* menu items */} + {item.menuItems.map((menuItem, index) => ( +
+ +

+ {menuItem.title} +

+ {menuItem.notification && ( +
+ + {menuItem.notification} + +
+ )} +
+ ))} + +
+
+ ))} +
+
+ ); +}; + +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) => ( +//
+// {/* divider */} +//
+//
+// +//

{button.title}

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

+ {subItem.name} +

+ )} + {subItem.num && ( +
+ {subItem.num} +
+ )} +
+ ))} */ +} diff --git a/src/components/SidebarMenu/index.scss b/src/components/Sidebar/SidebarDesign2/index.scss similarity index 100% rename from src/components/SidebarMenu/index.scss rename to src/components/Sidebar/SidebarDesign2/index.scss diff --git a/src/components/Sidebar/SidebarDesign2/logout.svg b/src/components/Sidebar/SidebarDesign2/logout.svg new file mode 100644 index 0000000..8cca478 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/logout.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/notification.svg b/src/components/Sidebar/SidebarDesign2/notification.svg new file mode 100644 index 0000000..332b91b --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/notification.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/profile-pic.svg b/src/components/Sidebar/SidebarDesign2/profile-pic.svg new file mode 100644 index 0000000..0367242 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/profile-pic.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/profilee.svg b/src/components/Sidebar/SidebarDesign2/profilee.svg new file mode 100644 index 0000000..47096c6 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/profilee.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/receipt-text.svg b/src/components/Sidebar/SidebarDesign2/receipt-text.svg new file mode 100644 index 0000000..cb081d0 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/receipt-text.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/search-normal.svg b/src/components/Sidebar/SidebarDesign2/search-normal.svg new file mode 100644 index 0000000..842c907 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/search-normal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/setting.svg b/src/components/Sidebar/SidebarDesign2/setting.svg new file mode 100644 index 0000000..3f0ffbe --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/setting.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/square.svg b/src/components/Sidebar/SidebarDesign2/square.svg new file mode 100644 index 0000000..a329a27 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/square.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Sidebar/SidebarDesign2/wallet-3.svg b/src/components/Sidebar/SidebarDesign2/wallet-3.svg new file mode 100644 index 0000000..ee98b39 --- /dev/null +++ b/src/components/Sidebar/SidebarDesign2/wallet-3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Sidebar/SidebarMenu/Vector.svg b/src/components/Sidebar/SidebarMenu/Vector.svg new file mode 100644 index 0000000..2940c95 --- /dev/null +++ b/src/components/Sidebar/SidebarMenu/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/SidebarMenu/arrow-down.svg b/src/components/Sidebar/SidebarMenu/arrow-down.svg similarity index 100% rename from src/components/SidebarMenu/arrow-down.svg rename to src/components/Sidebar/SidebarMenu/arrow-down.svg diff --git a/src/components/SidebarMenu/element-4.svg b/src/components/Sidebar/SidebarMenu/element-4.svg similarity index 100% rename from src/components/SidebarMenu/element-4.svg rename to src/components/Sidebar/SidebarMenu/element-4.svg diff --git a/src/components/SidebarMenu/folder-open.svg b/src/components/Sidebar/SidebarMenu/folder-open.svg similarity index 100% rename from src/components/SidebarMenu/folder-open.svg rename to src/components/Sidebar/SidebarMenu/folder-open.svg diff --git a/src/components/SidebarMenu/index.js b/src/components/Sidebar/SidebarMenu/index.js similarity index 96% rename from src/components/SidebarMenu/index.js rename to src/components/Sidebar/SidebarMenu/index.js index 977a2c3..0cee485 100644 --- a/src/components/SidebarMenu/index.js +++ b/src/components/Sidebar/SidebarMenu/index.js @@ -12,7 +12,7 @@ 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"; +import Switch from "../../Switch"; const SidebarMenu = ({ items, buttons }) => { return ( @@ -24,10 +24,10 @@ const SidebarMenu = ({ items, buttons }) => { {/* profile */}
-

+

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

- +
{/* divider */}
@@ -40,7 +40,7 @@ const SidebarMenu = ({ items, buttons }) => { key={i} className="flex flex-row items-center cursor-pointer hover:bg-blue-100 rounded-md p-2" > - +

{item.title}

{item.notification && (
diff --git a/src/components/Sidebar/SidebarMenu/index.scss b/src/components/Sidebar/SidebarMenu/index.scss new file mode 100644 index 0000000..f0bf785 --- /dev/null +++ b/src/components/Sidebar/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/Sidebar/SidebarMenu/logout.svg similarity index 100% rename from src/components/SidebarMenu/logout.svg rename to src/components/Sidebar/SidebarMenu/logout.svg diff --git a/src/components/SidebarMenu/message-text.svg b/src/components/Sidebar/SidebarMenu/message-text.svg similarity index 100% rename from src/components/SidebarMenu/message-text.svg rename to src/components/Sidebar/SidebarMenu/message-text.svg diff --git a/src/components/SidebarMenu/moon.svg b/src/components/Sidebar/SidebarMenu/moon.svg similarity index 100% rename from src/components/SidebarMenu/moon.svg rename to src/components/Sidebar/SidebarMenu/moon.svg diff --git a/src/components/SidebarMenu/profile-pic.svg b/src/components/Sidebar/SidebarMenu/profile-pic.svg similarity index 100% rename from src/components/SidebarMenu/profile-pic.svg rename to src/components/Sidebar/SidebarMenu/profile-pic.svg diff --git a/src/components/SidebarMenu/sms.svg b/src/components/Sidebar/SidebarMenu/sms.svg similarity index 100% rename from src/components/SidebarMenu/sms.svg rename to src/components/Sidebar/SidebarMenu/sms.svg diff --git a/src/components/SidebarMenu/user-edit.svg b/src/components/Sidebar/SidebarMenu/user-edit.svg similarity index 100% rename from src/components/SidebarMenu/user-edit.svg rename to src/components/Sidebar/SidebarMenu/user-edit.svg diff --git a/src/components/SidebarMenu/wallet-money.svg b/src/components/Sidebar/SidebarMenu/wallet-money.svg similarity index 100% rename from src/components/SidebarMenu/wallet-money.svg rename to src/components/Sidebar/SidebarMenu/wallet-money.svg