master
mahdi 3 years ago
parent ce0d5c6f70
commit 985baac9aa
  1. 7
      src/App.js
  2. 0
      src/components/Sidebar/SidebarDesign2/Vector.svg
  3. 4
      src/components/Sidebar/SidebarDesign2/arrow-down.svg
  4. 12
      src/components/Sidebar/SidebarDesign2/discount-shape.svg
  5. 5
      src/components/Sidebar/SidebarDesign2/home-2.svg
  6. 230
      src/components/Sidebar/SidebarDesign2/index.js
  7. 0
      src/components/Sidebar/SidebarDesign2/index.scss
  8. 11
      src/components/Sidebar/SidebarDesign2/logout.svg
  9. 9
      src/components/Sidebar/SidebarDesign2/notification.svg
  10. 8
      src/components/Sidebar/SidebarDesign2/profile-pic.svg
  11. 10
      src/components/Sidebar/SidebarDesign2/profilee.svg
  12. 12
      src/components/Sidebar/SidebarDesign2/receipt-text.svg
  13. 5
      src/components/Sidebar/SidebarDesign2/search-normal.svg
  14. 10
      src/components/Sidebar/SidebarDesign2/setting.svg
  15. 10
      src/components/Sidebar/SidebarDesign2/square.svg
  16. 10
      src/components/Sidebar/SidebarDesign2/wallet-3.svg
  17. 3
      src/components/Sidebar/SidebarMenu/Vector.svg
  18. 0
      src/components/Sidebar/SidebarMenu/arrow-down.svg
  19. 0
      src/components/Sidebar/SidebarMenu/element-4.svg
  20. 0
      src/components/Sidebar/SidebarMenu/folder-open.svg
  21. 8
      src/components/Sidebar/SidebarMenu/index.js
  22. 9
      src/components/Sidebar/SidebarMenu/index.scss
  23. 0
      src/components/Sidebar/SidebarMenu/logout.svg
  24. 0
      src/components/Sidebar/SidebarMenu/message-text.svg
  25. 0
      src/components/Sidebar/SidebarMenu/moon.svg
  26. 0
      src/components/Sidebar/SidebarMenu/profile-pic.svg
  27. 0
      src/components/Sidebar/SidebarMenu/sms.svg
  28. 0
      src/components/Sidebar/SidebarMenu/user-edit.svg
  29. 0
      src/components/Sidebar/SidebarMenu/wallet-money.svg

@ -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>
);

Before

Width:  |  Height:  |  Size: 499 B

After

Width:  |  Height:  |  Size: 499 B

@ -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>

After

Width:  |  Height:  |  Size: 448 B

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -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>

After

Width:  |  Height:  |  Size: 704 B

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

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 102 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -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>

After

Width:  |  Height:  |  Size: 646 B

@ -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>

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -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>

After

Width:  |  Height:  |  Size: 499 B

Before

Width:  |  Height:  |  Size: 434 B

After

Width:  |  Height:  |  Size: 434 B

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -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">

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

Before

Width:  |  Height:  |  Size: 943 B

After

Width:  |  Height:  |  Size: 943 B

Before

Width:  |  Height:  |  Size: 874 B

After

Width:  |  Height:  |  Size: 874 B

Before

Width:  |  Height:  |  Size: 597 B

After

Width:  |  Height:  |  Size: 597 B

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Before

Width:  |  Height:  |  Size: 755 B

After

Width:  |  Height:  |  Size: 755 B

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

Loading…
Cancel
Save