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;
+ }
+ }
+}