update

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() {
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
         {/* <CourseChapter /> */}
-        <SidebarMenu />
+        {/* <SidebarMenu /> */}
+        <SidebarDesign2 />
       </div>
     </Provider>
   );

src/components/Sidebar/SidebarDesign2/arrow-down.svg

@@ -0,0 +1,4 @@
+<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="18.5" height="18.5" viewBox="0 0 18.5 18.5">
+  <path id="Vector" d="M9.958,0H.832A.83.83,0,0,0,.246,1.418L4.239,5.411a1.642,1.642,0,0,0,2.32,0L8.077,3.893l2.474-2.474A.834.834,0,0,0,9.958,0Z" transform="translate(3.855 6.305)" fill="#c8def9"/>
+  <path id="Vector-2" data-name="Vector" d="M0,0H18.5V18.5H0Z" transform="translate(18.5 18.5) rotate(180)" fill="none" opacity="0"/>
+</svg>

src/components/Sidebar/SidebarDesign2/discount-shape.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <g id="discount-shape" transform="translate(-364 -316)">
+    <path id="Vector" d="M2.647,16.847.62,14.82a2.141,2.141,0,0,1,0-3.013L2.647,9.78a2.46,2.46,0,0,0,.627-1.507V5.407A2.14,2.14,0,0,1,5.407,3.273H8.273A2.46,2.46,0,0,0,9.78,2.647L11.807.62a2.141,2.141,0,0,1,3.013,0l2.027,2.027a2.46,2.46,0,0,0,1.507.627H21.22a2.14,2.14,0,0,1,2.133,2.133V8.273A2.46,2.46,0,0,0,23.98,9.78l2.027,2.027a2.141,2.141,0,0,1,0,3.013L23.98,16.847a2.46,2.46,0,0,0-.627,1.507V21.22a2.14,2.14,0,0,1-2.133,2.133H18.353a2.46,2.46,0,0,0-1.507.627L14.82,26.007a2.141,2.141,0,0,1-3.013,0L9.78,23.98a2.46,2.46,0,0,0-1.507-.627H5.407A2.14,2.14,0,0,1,3.273,21.22V18.353A2.4,2.4,0,0,0,2.647,16.847Z" transform="translate(366.672 318.701)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M0,8,8,0" transform="translate(376 328)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <g id="Vector-3" data-name="Vector" transform="translate(364 316)" fill="none" opacity="0">
+      <path d="M0,0H32V32H0Z" stroke="none"/>
+      <path d="M 1 1 L 1 31 L 31 31 L 31 1 L 1 1 M 0 0 L 32 0 L 32 32 L 0 32 L 0 0 Z" stroke="none" fill="#65a9ff"/>
+    </g>
+    <path id="Vector-4" data-name="Vector" d="M.495.5H.506" transform="translate(382.832 334.833)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-5" data-name="Vector" d="M.495.5H.506" transform="translate(376.165 328.167)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>

src/components/Sidebar/SidebarDesign2/home-2.svg

@@ -0,0 +1,5 @@
+<svg id="home-2" xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33">
+  <path id="Vector" d="M24.819,6.624,16.9,1.083a6.672,6.672,0,0,0-7.549.179L2.461,6.638A7.085,7.085,0,0,0,0,11.643v9.487A6.367,6.367,0,0,0,6.352,27.5H21.175a6.355,6.355,0,0,0,6.353-6.352V11.822A7.017,7.017,0,0,0,24.819,6.624Z" transform="translate(2.736 2.753)" fill="#65a9ff"/>
+  <path id="Vector-2" data-name="Vector" d="M1.031,6.188A1.039,1.039,0,0,1,0,5.156V1.031A1.039,1.039,0,0,1,1.031,0,1.039,1.039,0,0,1,2.063,1.031V5.156A1.039,1.039,0,0,1,1.031,6.188Z" transform="translate(15.469 19.594)" fill="#e2eafc"/>
+  <path id="Vector-3" data-name="Vector" d="M0,0H33V33H0Z" fill="none" opacity="0"/>
+</svg>

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 (
+    <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>
+            ))} */
+}

src/components/Sidebar/SidebarDesign2/logout.svg

@@ -0,0 +1,11 @@
+<svg id="vuesax_linear_logout" data-name="vuesax/linear/logout" xmlns="http://www.w3.org/2000/svg" width="31.174" height="31.174" viewBox="0 0 31.174 31.174">
+  <g id="logout">
+    <path id="Vector" d="M0,6.586C.4,1.909,2.806,0,8.066,0h.169c5.806,0,8.131,2.325,8.131,8.131V16.6c0,5.806-2.325,8.131-8.131,8.131H8.066c-5.222,0-7.625-1.883-8.053-6.482" transform="translate(11.56 3.234)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M14.782,0H0" transform="translate(4.702 15.587)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-3" data-name="Vector" d="M4.351,0,0,4.351,4.351,8.7" transform="translate(3.247 11.236)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <g id="Vector-4" data-name="Vector" transform="translate(31.174 31.174) rotate(180)" fill="none" opacity="0">
+      <path d="M0,0H31.174V31.174H0Z" stroke="none"/>
+      <path d="M 1.000003814697266 0.9999980926513672 L 1.000003814697266 30.17419815063477 L 30.17416381835938 30.17419815063477 L 30.17416381835938 0.9999980926513672 L 1.000003814697266 0.9999980926513672 M 3.814697265625e-06 -1.9073486328125e-06 L 31.17416381835938 -1.9073486328125e-06 L 31.17416381835938 31.17419624328613 L 3.814697265625e-06 31.17419624328613 L 3.814697265625e-06 -1.9073486328125e-06 Z" stroke="none" fill="#65a9ff"/>
+    </g>
+  </g>
+</svg>

src/components/Sidebar/SidebarDesign2/notification.svg

@@ -0,0 +1,9 @@
+<svg id="notification" xmlns="http://www.w3.org/2000/svg" width="30.705" height="30.705" viewBox="0 0 30.705 30.705">
+  <path id="Vector" d="M10.294,0A7.682,7.682,0,0,0,2.618,7.676v3.7a6.113,6.113,0,0,1-.729,2.636L.417,16.453A2.455,2.455,0,0,0,1.8,20.2a26.766,26.766,0,0,0,16.977,0,2.562,2.562,0,0,0,1.382-3.749l-1.471-2.444a6.282,6.282,0,0,1-.716-2.636v-3.7A7.7,7.7,0,0,0,10.294,0Z" transform="translate(5.084 3.723)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-width="2"/>
+  <path id="Vector-2" data-name="Vector" d="M4.734,1.612a7.746,7.746,0,0,0-1.228-.256A8.641,8.641,0,0,0,0,1.612a2.544,2.544,0,0,1,4.734,0Z" transform="translate(13.011 2.111)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-3" data-name="Vector" d="M7.676,0A3.849,3.849,0,0,1,3.838,3.838,3.852,3.852,0,0,1,1.126,2.712,3.852,3.852,0,0,1,0,0" transform="translate(11.54 25.418)" fill="none" stroke="#65a9ff" stroke-width="2"/>
+  <g id="Vector-4" data-name="Vector" fill="none" opacity="0">
+    <path d="M0,0H30.7V30.7H0Z" stroke="none"/>
+    <path d="M 1 1 L 1 29.70489883422852 L 29.70489883422852 29.70489883422852 L 29.70489883422852 1 L 1 1 M 0 0 L 30.70489883422852 0 L 30.70489883422852 30.70489883422852 L 0 30.70489883422852 L 0 0 Z" stroke="none" fill="#65a9ff"/>
+  </g>
+</svg>

src/components/Sidebar/SidebarDesign2/profilee.svg

@@ -0,0 +1,10 @@
+<svg id="vuesax_linear_profile" data-name="vuesax/linear/profile" xmlns="http://www.w3.org/2000/svg" width="31.174" height="31.174" viewBox="0 0 31.174 31.174">
+  <g id="profile" transform="translate(0 0)">
+    <path id="Vector" d="M5.975,11.521a2.361,2.361,0,0,0-.429,0,5.774,5.774,0,1,1,.429,0Z" transform="translate(9.82 2.598)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M2.358,1.783c-3.143,2.1-3.143,5.533,0,7.625a12.685,12.685,0,0,0,13,0c3.143-2.1,3.143-5.533,0-7.625A12.745,12.745,0,0,0,2.358,1.783Z" transform="translate(6.943 17.13)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <g id="Vector-3" data-name="Vector" transform="translate(31.174 31.174) rotate(180)" fill="none" opacity="0">
+      <path d="M0,0H31.174V31.174H0Z" stroke="none"/>
+      <path d="M 0.9999980926513672 1 L 0.9999980926513672 30.17421913146973 L 30.17419815063477 30.17421913146973 L 30.17419815063477 1 L 0.9999980926513672 1 M -1.9073486328125e-06 0 L 31.17419624328613 0 L 31.17419624328613 31.17421913146973 L -1.9073486328125e-06 31.17421913146973 L -1.9073486328125e-06 0 Z" stroke="none" fill="#65a9ff"/>
+    </g>
+  </g>
+</svg>

src/components/Sidebar/SidebarDesign2/receipt-text.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.5" height="31.5" viewBox="0 0 31.5 31.5">
+  <g id="receipt-text" transform="translate(-108 -444)">
+    <path id="Vector" d="M7.875,5.25V8.426a3.157,3.157,0,0,1-3.386,3.386H0V2.638A2.65,2.65,0,0,1,2.651,0,5.243,5.243,0,0,1,7.875,5.25Z" transform="translate(129 446.625)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M0,6.562V24.937a1.308,1.308,0,0,0,2.1,1.05l2.244-1.68a1.322,1.322,0,0,1,1.733.131l2.179,2.192a1.323,1.323,0,0,0,1.864,0l2.2-2.2a1.3,1.3,0,0,1,1.706-.118l2.244,1.68a1.315,1.315,0,0,0,2.1-1.05V2.625A2.633,2.633,0,0,1,21,0H5.25C1.312,0,0,2.349,0,5.25Z" transform="translate(110.625 446.625)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H7.875" transform="translate(115.875 455.812)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H5.906" transform="translate(116.859 461.063)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <g id="Vector-5" data-name="Vector" transform="translate(108 444)" fill="none" opacity="0">
+      <path d="M0,0H31.5V31.5H0Z" stroke="none"/>
+      <path d="M 0.9999980926513672 0.9999980926513672 L 0.9999980926513672 30.5 L 30.5 30.5 L 30.5 0.9999980926513672 L 0.9999980926513672 0.9999980926513672 M -1.9073486328125e-06 -1.9073486328125e-06 L 31.5 -1.9073486328125e-06 L 31.5 31.5 L -1.9073486328125e-06 31.5 L -1.9073486328125e-06 -1.9073486328125e-06 Z" stroke="none" fill="#65a9ff"/>
+    </g>
+  </g>
+</svg>

src/components/Sidebar/SidebarDesign2/search-normal.svg

@@ -0,0 +1,5 @@
+<svg id="search-normal" xmlns="http://www.w3.org/2000/svg" width="29.902" height="29.902" viewBox="0 0 29.902 29.902">
+  <path id="Vector" d="M23.672,11.836A11.836,11.836,0,1,1,11.836,0,11.836,11.836,0,0,1,23.672,11.836Z" transform="translate(2.492 2.492)" fill="none" stroke="#e2eafc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  <path id="Vector-2" data-name="Vector" d="M2.492,2.492,0,0" transform="translate(24.918 24.918)" fill="none" stroke="#e2eafc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  <path id="Vector-3" data-name="Vector" d="M0,0H29.9V29.9H0Z" fill="none" opacity="0"/>
+</svg>

src/components/Sidebar/SidebarDesign2/setting.svg

@@ -0,0 +1,10 @@
+<svg id="vuesax_linear_setting-2" data-name="vuesax/linear/setting-2" xmlns="http://www.w3.org/2000/svg" width="31.174" height="31.174" viewBox="0 0 31.174 31.174">
+  <g id="setting-2" transform="translate(0 0)">
+    <path id="Vector" d="M7.794,3.9A3.9,3.9,0,1,1,3.9,0,3.9,3.9,0,0,1,7.794,3.9Z" transform="translate(11.69 11.69)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path id="Vector-2" data-name="Vector" d="M0,13.4V11.117A2.475,2.475,0,0,1,2.468,8.649c2.351,0,3.312-1.663,2.13-3.7a2.467,2.467,0,0,1,.909-3.364L7.755.3a2.168,2.168,0,0,1,2.962.779l.143.247c1.169,2.039,3.091,2.039,4.273,0l.143-.247A2.168,2.168,0,0,1,18.237.3l2.247,1.286a2.467,2.467,0,0,1,.909,3.364c-1.182,2.039-.221,3.7,2.13,3.7a2.475,2.475,0,0,1,2.468,2.468V13.4a2.475,2.475,0,0,1-2.468,2.468c-2.351,0-3.312,1.663-2.13,3.7a2.464,2.464,0,0,1-.909,3.364l-2.247,1.286a2.168,2.168,0,0,1-2.962-.779l-.143-.247c-1.169-2.039-3.091-2.039-4.273,0l-.143.247a2.168,2.168,0,0,1-2.962.779L5.507,22.938A2.467,2.467,0,0,1,4.6,19.573c1.182-2.039.221-3.7-2.13-3.7A2.475,2.475,0,0,1,0,13.4Z" transform="translate(2.598 3.327)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <g id="Vector-3" data-name="Vector" fill="none" opacity="0">
+      <path d="M0,0H31.174V31.174H0Z" stroke="none"/>
+      <path d="M 0.9999980926513672 1 L 0.9999980926513672 30.17421913146973 L 30.17419815063477 30.17421913146973 L 30.17419815063477 1 L 0.9999980926513672 1 M -1.9073486328125e-06 0 L 31.17419624328613 0 L 31.17419624328613 31.17421913146973 L -1.9073486328125e-06 31.17421913146973 L -1.9073486328125e-06 0 Z" stroke="none" fill="#65a9ff"/>
+    </g>
+  </g>
+</svg>

src/components/Sidebar/SidebarDesign2/square.svg

@@ -0,0 +1,10 @@
+<svg id="element-3" xmlns="http://www.w3.org/2000/svg" width="30.507" height="30.507" viewBox="0 0 30.507 30.507">
+  <path id="Vector" d="M10.8,8.288V2.517C10.8.725,9.991,0,7.97,0H2.835C.814,0,0,.725,0,2.517V8.275c0,1.805.814,2.517,2.835,2.517H7.97C9.991,10.8,10.8,10.08,10.8,8.288Z" transform="translate(17.16 2.542)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-2" data-name="Vector" d="M10.8,7.97V2.835C10.8.814,9.991,0,7.97,0H2.835C.814,0,0,.814,0,2.835V7.97C0,9.991.814,10.8,2.835,10.8H7.97C9.991,10.8,10.8,9.991,10.8,7.97Z" transform="translate(17.16 17.16)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-3" data-name="Vector" d="M10.8,8.288V2.517C10.8.725,9.991,0,7.97,0H2.835C.814,0,0,.725,0,2.517V8.275c0,1.805.814,2.517,2.835,2.517H7.97C9.991,10.8,10.8,10.08,10.8,8.288Z" transform="translate(2.542 2.542)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-4" data-name="Vector" d="M10.8,7.97V2.835C10.8.814,9.991,0,7.97,0H2.835C.814,0,0,.814,0,2.835V7.97C0,9.991.814,10.8,2.835,10.8H7.97C9.991,10.8,10.8,9.991,10.8,7.97Z" transform="translate(2.542 17.16)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <g id="Vector-5" data-name="Vector" fill="none" opacity="0">
+    <path d="M0,0H30.507V30.507H0Z" stroke="none"/>
+    <path d="M 1.000003814697266 0.9999942779541016 L 1.000003814697266 29.50746536254883 L 29.50744247436523 29.50746536254883 L 29.50744247436523 0.9999942779541016 L 1.000003814697266 0.9999942779541016 M 3.814697265625e-06 -5.7220458984375e-06 L 30.50744247436523 -5.7220458984375e-06 L 30.50744247436523 30.50746536254883 L 3.814697265625e-06 30.50746536254883 L 3.814697265625e-06 -5.7220458984375e-06 Z" stroke="none" fill="#65a9ff"/>
+  </g>
+</svg>

src/components/Sidebar/SidebarDesign2/wallet-3.svg

@@ -0,0 +1,10 @@
+<svg id="wallet-3" xmlns="http://www.w3.org/2000/svg" width="30.507" height="30.507" viewBox="0 0 30.507 30.507">
+  <path id="Vector" d="M7.627,0H0" transform="translate(8.898 14.173)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-2" data-name="Vector" d="M0,10.563V4.691A4.687,4.687,0,0,1,4.691,0h7.144c2.593,0,4.691,1.614,4.691,4.207" transform="translate(2.542 3.61)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-3" data-name="Vector" d="M19.677,7.69a2.559,2.559,0,0,0-.686,2.517A2.759,2.759,0,0,0,21.7,12.139h1.182v1.843A5.083,5.083,0,0,1,17.8,19.067H5.085A5.083,5.083,0,0,1,0,13.983v-8.9A5.083,5.083,0,0,1,5.085,0H17.8a5.1,5.1,0,0,1,5.085,5.085V6.928H21.508A2.533,2.533,0,0,0,19.677,7.69Z" transform="translate(2.542 7.818)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <path id="Vector-4" data-name="Vector" d="M6.52,1.3V3.915a1.3,1.3,0,0,1-1.309,1.3H2.757A2.71,2.71,0,0,1,.012,2.835,2.553,2.553,0,0,1,.774.763,2.533,2.533,0,0,1,2.6,0H5.211A1.3,1.3,0,0,1,6.52,1.3Z" transform="translate(21.445 14.745)" fill="none" stroke="#65a9ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  <g id="Vector-5" data-name="Vector" transform="translate(30.507 30.507) rotate(180)" fill="none" opacity="0">
+    <path d="M0,0H30.507V30.507H0Z" stroke="none"/>
+    <path d="M 1.000003814697266 0.9999942779541016 L 1.000003814697266 29.50746536254883 L 29.50744247436523 29.50746536254883 L 29.50744247436523 0.9999942779541016 L 1.000003814697266 0.9999942779541016 M 3.814697265625e-06 -5.7220458984375e-06 L 30.50744247436523 -5.7220458984375e-06 L 30.50744247436523 30.50746536254883 L 3.814697265625e-06 30.50746536254883 L 3.814697265625e-06 -5.7220458984375e-06 Z" stroke="none" fill="#65a9ff"/>
+  </g>
+</svg>

src/components/Sidebar/SidebarMenu/Vector.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17.774" height="16.04" viewBox="0 0 17.774 16.04">
+  <path id="Vector" d="M0,6.069V4.335A4.035,4.035,0,0,1,3.633.052,4.615,4.615,0,0,1,4.335,0h7.8a3.965,3.965,0,0,1,.65.043,4.044,4.044,0,0,1,3.685,4.292V5.593h-1.8A1.787,1.787,0,0,0,12.9,7.526a1.849,1.849,0,0,0,1.873,1.621h1.7V10.4a4.1,4.1,0,0,1-4.335,4.335H9.971" transform="translate(0.65 0.65)" fill="none" stroke="#247deb" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3"/>
+</svg>

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 */}
         <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 className="text-blue-600 font-bold text-base flex-1 mr-2">
             کامران کوهستانی شیرازی
           </p>
-          <img src={downwardArrow} alt="" className="w-5" />
+          <img src={downwardArrow} alt="" className="w-5 cursor-pointer" />
         </div>
         {/* divider */}
         <div className="border border-gray-200 mt-5"></div>
@@ -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"
             >
-              <img src={item.icon} alt="" />
+              <img src={item.icon} alt="" className="w-5 h-5" />
               <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">

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 */
+}