reza changed drawer icons

3 years ago · 3b705c1384
parent 2723cd6446
commit 3b705c1384
23 changed files with 298 additions and 150 deletions
--- a/src/components/Dialog/index.js
+++ b/src/components/Dialog/index.js
@ -3,24 +3,38 @@ import { connect } from "react-redux";
 import { dialog } from "../../redux/actions";

 export const Dialog = ({ dialog, setDialog }) => {
+  const [boxAnimation, setBoxAnimation] = React.useState(false);
  const { text, type, accept } = dialog;
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setBoxAnimation(true);
+    }, 200);
+
+    return () => {
+      setBoxAnimation(false);
+    };
+  }, []);
+
  const exit = (e) => {
    setDialog({ ...dialog, open: !dialog.open });
    e.stopPropagation();
-  }
+  };

  const acceptFunc = () => {
    setDialog({ ...dialog, open: !dialog.open });
    accept();
-  }
+  };
  return (
    <div
      className="w-screen  h-full fixed top-0 right-0 bg-gray-500 bg-opacity-10 backdrop-filter backdrop-blur-lg flex justify-center items-center"
-      style={{zIndex : 70}}
+      style={{ zIndex: 70 }}
      onClick={(e) => exit(e)}
    >
      <div
-        className={`flex flex-col items-center bg-white dark:bg-black dark:bg-opacity-30 backdrop-filter backdrop-blur-xl rounded-md p-5 shadow-2xl`}
+        className={`flex flex-col items-center bg-white dark:bg-black dark:bg-opacity-30 backdrop-filter backdrop-blur-xl rounded-md p-5 transition-all transform shadow-2xl ${
+          boxAnimation ? "scale-100" : "scale-0"
+        }`}
        style={{ minWidth: 300 }}
        onClick={(e) => e.stopPropagation()}
      >
--- a/src/components/Drawer/AR-dark.svg
+++ b/src/components/Drawer/AR-dark.svg
@ -0,0 +1,8 @@
+<svg id="vuesax_linear_3dcube" data-name="vuesax/linear/3dcube" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="_3dcube" data-name="3dcube">
+    <path id="Vector" d="M8.92.233l6.51,3.51a1.153,1.153,0,0,1,0,1.99L8.92,9.243a1.936,1.936,0,0,1-1.84,0L.57,5.733a1.153,1.153,0,0,1,0-1.99L7.08.233A1.936,1.936,0,0,1,8.92.233Z" transform="translate(4 2.027)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M1.61.12,7.66,3.15A2.238,2.238,0,0,1,8.89,5.14v5.72a1.109,1.109,0,0,1-1.61.99L1.23,8.82A2.238,2.238,0,0,1,0,6.83V1.11A1.109,1.109,0,0,1,1.61.12Z" transform="translate(2 10.01)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M7.28.12,1.23,3.15A2.238,2.238,0,0,0,0,5.14v5.72a1.109,1.109,0,0,0,1.61.99L7.66,8.82A2.238,2.238,0,0,0,8.89,6.83V1.11A1.109,1.109,0,0,0,7.28.12Z" transform="translate(13.11 10.01)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
--- a/src/components/Drawer/AR.svg
+++ b/src/components/Drawer/AR.svg
@ -0,0 +1,8 @@
+<svg id="vuesax_linear_3dcube" data-name="vuesax/linear/3dcube" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="_3dcube" data-name="3dcube">
+    <path id="Vector" d="M8.92.233l6.51,3.51a1.153,1.153,0,0,1,0,1.99L8.92,9.243a1.936,1.936,0,0,1-1.84,0L.57,5.733a1.153,1.153,0,0,1,0-1.99L7.08.233A1.936,1.936,0,0,1,8.92.233Z" transform="translate(4 2.027)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M1.61.12,7.66,3.15A2.238,2.238,0,0,1,8.89,5.14v5.72a1.109,1.109,0,0,1-1.61.99L1.23,8.82A2.238,2.238,0,0,1,0,6.83V1.11A1.109,1.109,0,0,1,1.61.12Z" transform="translate(2 10.01)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M7.28.12,1.23,3.15A2.238,2.238,0,0,0,0,5.14v5.72a1.109,1.109,0,0,0,1.61.99L7.66,8.82A2.238,2.238,0,0,0,8.89,6.83V1.11A1.109,1.109,0,0,0,7.28.12Z" transform="translate(13.11 10.01)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
--- a/src/components/Drawer/activation-dark.svg
+++ b/src/components/Drawer/activation-dark.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.431" height="21.431" viewBox="0 0 21.431 21.431">
+  <g id="Group_1" data-name="Group 1" transform="translate(0.75 0.75)">
+    <path id="Vector" d="M19.931,12.955V6.976C19.931,1.993,17.938,0,12.955,0H6.976C1.993,0,0,1.993,0,6.976v5.979c0,4.983,1.993,6.976,6.976,6.976h5.979C17.938,19.931,19.931,17.938,19.931,12.955Z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,2.776,2.776,5.552,8.314,0" transform="translate(5.808 7.19)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>
--- a/src/components/Drawer/activation.svg
+++ b/src/components/Drawer/activation.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.431" height="21.431" viewBox="0 0 21.431 21.431">
+  <g id="Group_1" data-name="Group 1" transform="translate(0.75 0.75)">
+    <path id="Vector" d="M19.931,12.955V6.976C19.931,1.993,17.938,0,12.955,0H6.976C1.993,0,0,1.993,0,6.976v5.979c0,4.983,1.993,6.976,6.976,6.976h5.979C17.938,19.931,19.931,17.938,19.931,12.955Z" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,2.776,2.776,5.552,8.314,0" transform="translate(5.808 7.19)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>
--- a/src/components/Drawer/contact-dark.svg
+++ b/src/components/Drawer/contact-dark.svg
@ -0,0 +1,10 @@
+<svg id="vuesax_linear_call-calling" data-name="vuesax/linear/call-calling" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="call-calling">
+    <g id="call-calling-2" data-name="call-calling" transform="translate(2 2)">
+      <path id="Vector" d="M19.97,16.33a2.545,2.545,0,0,1-.25,1.09,4.126,4.126,0,0,1-.68,1.02,4.508,4.508,0,0,1-1.64,1.18,5.022,5.022,0,0,1-1.95.38,8.334,8.334,0,0,1-3.26-.73,17.564,17.564,0,0,1-3.44-1.98,28.75,28.75,0,0,1-3.28-2.8,28.414,28.414,0,0,1-2.79-3.27A17.828,17.828,0,0,1,.72,7.81,8.423,8.423,0,0,1,0,4.54,5.173,5.173,0,0,1,.36,2.61,4.6,4.6,0,0,1,1.51.94,2.93,2.93,0,0,1,3.59,0,1.879,1.879,0,0,1,4.4.18a1.63,1.63,0,0,1,.67.56L7.39,4.01a3.422,3.422,0,0,1,.4.7,1.581,1.581,0,0,1,.14.61,1.357,1.357,0,0,1-.21.71,3.4,3.4,0,0,1-.56.71l-.76.79a.535.535,0,0,0-.16.4.908.908,0,0,0,.03.23c.03.08.06.14.08.2a8.3,8.3,0,0,0,.93,1.28c.45.52.93,1.05,1.45,1.58.54.53,1.06,1.02,1.59,1.47a7.675,7.675,0,0,0,1.29.92c.05.02.11.05.18.08a.69.69,0,0,0,.25.04.55.55,0,0,0,.41-.17l.76-.75a3.068,3.068,0,0,1,.72-.56,1.332,1.332,0,0,1,.71-.21,1.6,1.6,0,0,1,.61.13,3.868,3.868,0,0,1,.7.39l3.31,2.35a1.517,1.517,0,0,1,.55.64A2.052,2.052,0,0,1,19.97,16.33Z" fill="none" stroke="#ffffff" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M3.5,3.5A3.965,3.965,0,0,0,2.33,1.23,3.416,3.416,0,0,0,0,0" transform="translate(13 3.5)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M7,7A7,7,0,0,0,0,0" transform="translate(13)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    </g>
+    <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
--- a/src/components/Drawer/contact.svg
+++ b/src/components/Drawer/contact.svg
@ -0,0 +1,10 @@
+<svg id="vuesax_linear_call-calling" data-name="vuesax/linear/call-calling" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="call-calling">
+    <g id="call-calling-2" data-name="call-calling" transform="translate(2 2)">
+      <path id="Vector" d="M19.97,16.33a2.545,2.545,0,0,1-.25,1.09,4.126,4.126,0,0,1-.68,1.02,4.508,4.508,0,0,1-1.64,1.18,5.022,5.022,0,0,1-1.95.38,8.334,8.334,0,0,1-3.26-.73,17.564,17.564,0,0,1-3.44-1.98,28.75,28.75,0,0,1-3.28-2.8,28.414,28.414,0,0,1-2.79-3.27A17.828,17.828,0,0,1,.72,7.81,8.423,8.423,0,0,1,0,4.54,5.173,5.173,0,0,1,.36,2.61,4.6,4.6,0,0,1,1.51.94,2.93,2.93,0,0,1,3.59,0,1.879,1.879,0,0,1,4.4.18a1.63,1.63,0,0,1,.67.56L7.39,4.01a3.422,3.422,0,0,1,.4.7,1.581,1.581,0,0,1,.14.61,1.357,1.357,0,0,1-.21.71,3.4,3.4,0,0,1-.56.71l-.76.79a.535.535,0,0,0-.16.4.908.908,0,0,0,.03.23c.03.08.06.14.08.2a8.3,8.3,0,0,0,.93,1.28c.45.52.93,1.05,1.45,1.58.54.53,1.06,1.02,1.59,1.47a7.675,7.675,0,0,0,1.29.92c.05.02.11.05.18.08a.69.69,0,0,0,.25.04.55.55,0,0,0,.41-.17l.76-.75a3.068,3.068,0,0,1,.72-.56,1.332,1.332,0,0,1,.71-.21,1.6,1.6,0,0,1,.61.13,3.868,3.868,0,0,1,.7.39l3.31,2.35a1.517,1.517,0,0,1,.55.64A2.052,2.052,0,0,1,19.97,16.33Z" fill="none" stroke="#292d32" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M3.5,3.5A3.965,3.965,0,0,0,2.33,1.23,3.416,3.416,0,0,0,0,0" transform="translate(13 3.5)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M7,7A7,7,0,0,0,0,0" transform="translate(13)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    </g>
+    <path id="Vector-4" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
--- a/src/components/Drawer/faq-dark.svg
+++ b/src/components/Drawer/faq-dark.svg
@ -0,0 +1,7 @@
+<svg id="vuesax_linear_lamp-on" data-name="vuesax/linear/lamp-on" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="lamp-on">
+    <path id="Vector" d="M4.19,16.044v-1.16A8.579,8.579,0,0,1,0,7.9,7.919,7.919,0,0,1,9.69.194a7.784,7.784,0,0,1,5.27,4.07c2.09,4.2-.11,8.66-3.34,10.61v1.16c0,.29.11.96-.96.96H5.15C4.05,17,4.19,16.574,4.19,16.044Z" transform="translate(4.11 1.996)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,.487a12.808,12.808,0,0,1,7,0" transform="translate(8.5 21.512)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
--- a/src/components/Drawer/faq.svg
+++ b/src/components/Drawer/faq.svg
@ -0,0 +1,7 @@
+<svg id="vuesax_linear_lamp-on" data-name="vuesax/linear/lamp-on" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="lamp-on">
+    <path id="Vector" d="M4.19,16.044v-1.16A8.579,8.579,0,0,1,0,7.9,7.919,7.919,0,0,1,9.69.194a7.784,7.784,0,0,1,5.27,4.07c2.09,4.2-.11,8.66-3.34,10.61v1.16c0,.29.11.96-.96.96H5.15C4.05,17,4.19,16.574,4.19,16.044Z" transform="translate(4.11 1.996)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,.487a12.808,12.808,0,0,1,7,0" transform="translate(8.5 21.512)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
--- a/src/components/Drawer/home-dark.svg
+++ b/src/components/Drawer/home-dark.svg
@ -0,0 +1,7 @@
+<svg id="vuesax_linear_home-2" data-name="vuesax/linear/home-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="home-2">
+    <path id="Vector" d="M7.02.823l-5.39,4.2A4.759,4.759,0,0,0,0,8.343v7.41a4.225,4.225,0,0,0,4.21,4.22H15.79A4.223,4.223,0,0,0,20,15.763V8.483a4.723,4.723,0,0,0-1.8-3.45L12.02.7A4.487,4.487,0,0,0,7.02.823Z" transform="translate(2 2.017)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,3V0" transform="translate(12 14.99)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
--- a/src/components/Drawer/home.svg
+++ b/src/components/Drawer/home.svg
@ -0,0 +1,7 @@
+<svg id="vuesax_linear_home-2" data-name="vuesax/linear/home-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="home-2">
+    <path id="Vector" d="M7.02.823l-5.39,4.2A4.759,4.759,0,0,0,0,8.343v7.41a4.225,4.225,0,0,0,4.21,4.22H15.79A4.223,4.223,0,0,0,20,15.763V8.483a4.723,4.723,0,0,0-1.8-3.45L12.02.7A4.487,4.487,0,0,0,7.02.823Z" transform="translate(2 2.017)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,3V0" transform="translate(12 14.99)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
--- a/src/components/Drawer/index.js
+++ b/src/components/Drawer/index.js
@ -1,112 +1,47 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
-import { publicApi } from "../../redux/actions";
+import { publicApi, dialog, user } from "../../redux/actions";
 import { Link } from "react-router-dom";
 import Drawer from "react-modern-drawer";

-import homeIcon from "./mobile-home.svg";
-import logoutIcon from "./mobile-logout.svg";
-import blogIcon from "./mobile-blog.svg";
+//assets
+import homeIcon from "./home.svg";
+import homeDarkIcon from "./home-dark.svg";
+import logoutIcon from "./logout.svg";
+import logoutDarkIcon from "./logout-dark.svg";
 import dangerIcon from "./mobile-danger.svg";
+import dangerDarkIcon from "./mobile-danger-dark.svg";
+import activationIcon from "./activation.svg";
+import activationDarkIcon from "./activation-dark.svg";
+import contactIcon from "./contact.svg";
+import contactDarkIcon from "./contact-dark.svg";
+import ordersIcon from "./orders.svg";
+import ordersDarkIcon from "./orders-dark.svg";
+import arIcon from "./AR.svg";
+import arDarkIcon from "./AR-dark.svg";
 import cartIcon from "./mobile-basket.svg";
-import profileIcon from "./mobile-profile.svg";
-import Avatar from "../../components/Avatar";
+import cartDarkIcon from "./mobile-basket-dark.svg"
+import faqIcon from "./faq.svg";
+import faqDarkIcon from "./faq-dark.svg";
+
 import arrowLeftVideo from "../../assets/icons/dropdown-white.svg";
 import sunIcon from "./sun.svg";
 import moonIcon from "./moon.svg";

+//components
+import Avatar from "../../components/Avatar";
+
 const MyDrawer = ({
  setDrawerOpen,
  drawerOpen,
-  publicLink,
-  privateLink,
  isDark,
  user,
  changeDarkMode,
+  setDialog,
+  logout,
 }) => {
  const [addUserDropdown, setAddUserDropdown] = useState(false);
-
-  return (
-    <Drawer
-      open={drawerOpen}
-      onClose={() => setDrawerOpen(() => !drawerOpen)}
-      size={"80%"}
-      direction="right"
-    >
-      <div
-        className={`flex flex-col flex-1 h-full divide-y divide-solid divide-gray-200 dark:divide-gray-600 bg-white dark:bg-black dark:bg-opacity- ${
-          isDark ? "bg-dark" : "bg-white"
-        }`}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <header
-          className="flex flex-col justify-between h-1/6 pt-3 px-3 bg-green-500 dark:bg-blue90"
-          style={{ minHeight: "calc(100vh / 6)" }}
-        >
-          <div className="flex flex-row justify-between">
-            <Avatar size={70} rounded={true} />
-            <img
-              src={isDark ? sunIcon : moonIcon}
-              className="w-8"
-              alt=""
-              onClick={() => changeDarkMode(!isDark)}
-            />
-          </div>
-          <div className="flex flex-row justify-between px-2 pb-3 mt-1">
-            <div className="flex flex-col">
-              <strong className="text-lg text-white">
-                {user && user?.firstName + " " + user?.lastName}
-              </strong>
-              <span className="text-xs mt-2 text-gray-100 dark:text-grayDB">
-                {user?.cellphone}
-              </span>
-            </div>
-            <img
-              src={arrowLeftVideo}
-              alt=""
-              className={`transform ${
-                addUserDropdown ? "rotate-90" : "-rotate-90"
-              } cursor-pointer`}
-              onClick={() => setAddUserDropdown(() => !addUserDropdown)}
-            />
-          </div>
-        </header>
-        <ul
-          className={`flex flex-col ${
-            addUserDropdown ? "h-20" : "h-0"
-          } transition-all duration-500`}
-        ></ul>
-        <ul className="h-full flex flex-col py-6 px-4 gap-6">
-          {(!user ? publicLink : privateLink).map((item, key) => (
-            <Link to={item.link} key={key} onClick={() => setDrawerOpen(false)}>
-              <div className="flex flex-row items-center">
-                {item.icon}
-                <div className="text-gray70 text-tiny mr-3 dark:text-white">
-                  {item.name}
-                </div>
-                {item.message && <div className="badge">{item.message}</div>}
-              </div>
-            </Link>
-          ))}
-        </ul>
-      </div>
-    </Drawer>
-  );
-};
-
-const mapStateToProps = (state) => ({
-  isDark: state.publicApi.isDark,
-  user: state.user.status,
-});
-
-const mapDispatchToProps = {
-  changeDarkMode: publicApi.setIsDark,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(MyDrawer);
-
-MyDrawer.defaultProps = {
-  publicLink: [
+  const publicLink = [
    {
      name: "صفحه اصلی",
      link: "/",
@ -133,28 +68,6 @@ MyDrawer.defaultProps = {
      toast: "",
      message: "",
    },
-    {
-      name: "فروشگاه",
-      link: "/products",
-      icon: (
-        <img
-          src={blogIcon}
-          className="opacity-50 dark:bg-white"
-          alt="کتاب‌های من"
-        />
-      ),
-      toast: "",
-      message: "",
-    },
-    {
-      name: "بلاگ",
-      link: "/blogs",
-      icon: (
-        <img src={blogIcon} className="opacity-50 dark:bg-white" alt="بلاگ" />
-      ),
-      toast: "",
-      message: "",
-    },
    {
      name: "پشتیبانی",
      link: "/contact-us",
@ -168,94 +81,219 @@ MyDrawer.defaultProps = {
      toast: "",
      message: "",
    },
-  ],
-  privateLink: [
+  ];
+  const privateLink = [
    {
      name: "صفحه اصلی",
      link: "/",
      icon: (
        <img
-          src={homeIcon}
-          className="opacity-50 dark:bg-white"
+          src={isDark ? homeDarkIcon : homeIcon}
+          className="opacity-50"
          alt="صفحه اصلی"
        />
      ),
      toast: "",
      message: "",
+      onClick: () => {
+        setDrawerOpen(false);
+      },
    },
    {
-      name: "پروفایل",
-      link: "/profile",
+      name: "سبد خرید",
+      link: "/cart",
      icon: (
        <img
-          src={profileIcon}
-          className="opacity-50 dark:bg-white"
-          alt="پروفایل"
+          src={isDark ? cartDarkIcon : cartIcon}
+          className="opacity-50"
+          alt="سبد خرید"
        />
      ),
      toast: "",
      message: "",
+      onClick: () => {
+        setDrawerOpen(false);
+      },
    },
    {
-      name: "فروشگاه",
-      link: "/products",
+      name: "فعال سازی کتاب",
+      link: "/activation",
+      icon: (
+        <img src={isDark ? activationDarkIcon : activationIcon} className="opacity-50" alt="فعال سازی کتاب" />
+      ),
+      toast: "",
+      message: "",
+      onClick: () => {
+        setDrawerOpen(false);
+      },
+    },
+    {
+      name: "واقعیت افزوده",
+      link: "/ar",
      icon: (
        <img
-          src={blogIcon}
-          className="opacity-50 dark:bg-white"
-          alt="کتاب‌های من"
+          src={isDark ? arDarkIcon : arIcon}
+          className="opacity-50"
+          alt="واقعیت افزوده"
        />
      ),
      toast: "",
      message: "",
+      onClick: () => {
+        setDrawerOpen(false);
+      },
    },
    {
-      name: "سبد خرید",
-      link: "/cart",
+      name: "سفارشات",
+      link: "/orders",
      icon: (
        <img
-          src={cartIcon}
-          className="opacity-50 dark:bg-white"
-          alt="سبد خرید"
+          src={isDark ? ordersDarkIcon : ordersIcon}
+          className="opacity-50"
+          alt="سفارشات"
        />
      ),
      toast: "",
      message: "",
+      onClick: () => {
+        setDrawerOpen(false);
+      },
    },
    {
-      name: "بلاگ",
-      link: "/blogs",
+      name: "سوالات متداول",
+      link: "/faq",
      icon: (
-        <img src={blogIcon} className="opacity-50 dark:bg-white" alt="بلاگ" />
+        <img
+          src={isDark ? faqDarkIcon : faqIcon}
+          className="opacity-50"
+          alt="سوالات متداول"
+        />
      ),
      toast: "",
      message: "",
+      onClick: () => {
+        setDrawerOpen(false);
+      },
    },
    {
      name: "پشتیبانی",
-      link: "/support",
+      link: "/contact",
      icon: (
        <img
-          src={dangerIcon}
-          className="opacity-50 dark:bg-white"
+          src={isDark ? contactDarkIcon : contactIcon}
+          className="opacity-50"
          alt="پشتیبانی"
        />
      ),
      toast: "",
      message: "",
+      onClick: () => {
+        setDrawerOpen(false);
+      },
    },
    {
      name: "خروج از حساب کاربری",
      link: "/",
      icon: (
        <img
-          src={logoutIcon}
-          className="opacity-50 dark:bg-white"
+          src={isDark ? logoutDarkIcon : logoutIcon}
+          className="opacity-50"
          alt="خروج از حساب کاربری"
        />
      ),
      toast: "",
      message: "",
+      onClick: () => {
+        setDialog({
+          open: true,
+          type: "confirm",
+          accept: () => {
+            logout();
+          },
+          text: "قصد خروج از حساب کاربری رو داری؟",
+        });
+        setDrawerOpen(false);
      },
-  ],
+    },
+  ];
+
+  return (
+    <Drawer
+      open={drawerOpen}
+      onClose={() => setDrawerOpen(() => !drawerOpen)}
+      size={"80%"}
+      direction="right"
+    >
+      <div
+        className={`flex flex-col flex-1 h-full divide-y divide-solid divide-gray-200 dark:divide-gray-600 bg-white dark:bg-black dark:bg-opacity- ${
+          isDark ? "bg-dark" : "bg-white"
+        }`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <header
+          className="flex flex-col justify-between h-1/6 pt-3 px-3 bg-green-500 dark:bg-blue90"
+          style={{ minHeight: "calc(100vh / 6)" }}
+        >
+          <div className="flex flex-row justify-between">
+            <Avatar size={70} rounded={true} />
+            <img
+              src={isDark ? sunIcon : moonIcon}
+              className="w-8"
+              alt=""
+              onClick={() => changeDarkMode(!isDark)}
+            />
+          </div>
+          <div className="flex flex-row justify-between px-2 pb-3 mt-1">
+            <div className="flex flex-col">
+              <strong className="text-lg text-white">
+                {user && user?.firstName + " " + user?.lastName}
+              </strong>
+              <span className="text-xs mt-2 text-gray-100 dark:text-grayDB">
+                {user?.cellphone}
+              </span>
+            </div>
+            <img
+              src={arrowLeftVideo}
+              alt=""
+              className={`transform ${
+                addUserDropdown ? "rotate-90" : "-rotate-90"
+              } cursor-pointer`}
+              onClick={() => setAddUserDropdown(() => !addUserDropdown)}
+            />
+          </div>
+        </header>
+        <ul
+          className={`flex flex-col ${
+            addUserDropdown ? "h-20" : "h-0"
+          } transition-all duration-500`}
+        ></ul>
+        <ul className="h-full flex flex-col py-6 px-4 gap-6">
+          {(!user ? publicLink : privateLink).map((item, key) => (
+            <Link to={item.link} key={key} onClick={() => item.onClick()}>
+              <div className="flex flex-row items-center">
+                {item.icon}
+                <div className="text-gray70 text-tiny mr-5 dark:text-white">
+                  {item.name}
+                </div>
+                {item.message && <div className="badge">{item.message}</div>}
+              </div>
+            </Link>
+          ))}
+        </ul>
+      </div>
+    </Drawer>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  isDark: state.publicApi.isDark,
+  user: state.user.status,
+});
+
+const mapDispatchToProps = {
+  changeDarkMode: publicApi.setIsDark,
+  setDialog: dialog.set,
+  logout: user.logout,
 };
+
+export default connect(mapStateToProps, mapDispatchToProps)(MyDrawer);
--- a/src/components/Drawer/logout-dark.svg
+++ b/src/components/Drawer/logout-dark.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="22.288" viewBox="0 0 22.879 22.288"><defs><style>.a{fill:#ffffff;}</style></defs><g transform="translate(-982.022 -1291.926)"><g transform="translate(982.022 1291.926)"><path class="a" d="M999.959,1314.214a4.943,4.943,0,0,0,4.941-4.711v-12.635a4.944,4.944,0,0,0-4.71-4.943h-5.665a4.943,4.943,0,0,0-4.938,4.709v1.272a.836.836,0,0,0,1.664.111l.008-.111v-1.039a3.271,3.271,0,0,1,3.073-3.271h5.626a3.271,3.271,0,0,1,3.27,3.078v12.6a3.27,3.27,0,0,1-3.077,3.271l-.193.006h-5.444a3.26,3.26,0,0,1-3.254-3.067v-1.242a.837.837,0,0,0-1.665-.111l-.007.111v1.051a4.933,4.933,0,0,0,4.686,4.925h5.683Zm-13.255-7.305a.836.836,0,0,0,.078-1.089l-.08-.095-1.828-1.821h11.394a.836.836,0,0,0,.111-1.664l-.111-.007h-11.4l1.83-1.82a.836.836,0,0,0,.085-1.089l-.081-.095a.836.836,0,0,0-1.088-.083l-.094.08-3.264,3.248a.832.832,0,0,0-.238.486h0v.019h0v.02h0v.064h0v.017h0v.066a.817.817,0,0,0,.081.281h0l.007.015.007.011h0l.009.016h0l.009.014h0l.01.016h0l.009.013h0l.008.012h0l.008.01h0a.851.851,0,0,0,.1.111l3.244,3.232a.834.834,0,0,0,1.18,0h0Z" transform="translate(-982.022 -1291.926)"/></g></g></svg>
--- a/src/components/Drawer/mobile-logout.svg
+++ b/src/components/Drawer/mobile-logout.svg
--- a/src/components/Drawer/mobile-ar.svg
+++ b/src/components/Drawer/mobile-ar.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22.88" height="22.88" viewBox="0 0 22.88 22.88"><defs><style>.a,.b{fill:#4d4d4f;}.b{font-size:11px;font-family:SegoeUI-Bold, Segoe UI;font-weight:700;}</style></defs><g transform="translate(0)"><path class="a" d="M1.341,1.341H5.362V0H0V5.362H1.341Zm0,0" transform="translate(0 0)"/><path class="a" d="M392,0V1.341h4.022V5.362h1.341V0Zm0,0" transform="translate(-374.483 0)"/><path class="a" d="M396.022,396.022H392v1.341h5.362V392h-1.341Zm0,0" transform="translate(-374.483 -374.483)"/><path class="a" d="M1.341,392H0v5.362H5.362v-1.341H1.341Zm0,0" transform="translate(0 -374.483)"/><g transform="translate(4.388 4.363)"><text class="b" transform="translate(0 11)"><tspan x="0" y="0">A</tspan></text><text class="b" transform="translate(7.581 11)"><tspan x="0" y="0">R</tspan></text></g></g></svg>
--- a/src/components/Drawer/mobile-basket-dark.svg
+++ b/src/components/Drawer/mobile-basket-dark.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="22.421" viewBox="0 0 22.879 22.421"><defs><style>.a{fill:#ffffff;}</style></defs><g transform="translate(0 0)"><path class="a" d="M855.342,1265.093a1.733,1.733,0,1,1,1.734,1.732h0A1.734,1.734,0,0,1,855.342,1265.093Zm-12.87,0a1.732,1.732,0,1,1,1.732,1.732A1.732,1.732,0,0,1,842.472,1265.093Zm1.923-3.546a2.938,2.938,0,0,1-2.888-2.489l-.022-.188-1.045-12.469-1.727-.293a.86.86,0,0,1-.711-.876l.011-.115a.856.856,0,0,1,.846-.714h.031l.114.011,2.379.412a.858.858,0,0,1,.686.647l.021.127.269,3.2h16.129a2.368,2.368,0,0,1,1.751.762,2.4,2.4,0,0,1,.634,1.8l-.018.173-1.086,7.508a2.933,2.933,0,0,1-2.7,2.5l-.188.006Zm-1.2-2.82a1.207,1.207,0,0,0,1.067,1.1l.133.007h12.48a1.205,1.205,0,0,0,1.166-.9l.026-.134,1.087-7.5a.677.677,0,0,0-.572-.765l-.1-.008H842.5Zm8.677-3.976a.858.858,0,0,1-.114-1.708l.114-.008h3.173a.859.859,0,0,1,.114,1.709l-.114.007Z" transform="translate(-837.999 -1244.404)"/></g></svg>
--- a/src/components/Drawer/mobile-blog.svg
+++ b/src/components/Drawer/mobile-blog.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="24.902" viewBox="0 0 22.879 24.902"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0)"><g transform="translate(0 0)"><path class="a" d="M279.34,1316.806a9.028,9.028,0,0,0,1.488-.117l.277-.051a5.672,5.672,0,0,0,3.511-2.1,6.8,6.8,0,0,0,1.253-4.218v-11.93a8.946,8.946,0,0,0-.076-1.2c-.445-3.362-2.8-5.29-6.453-5.29h-9.817c-4.05,0-6.49,2.389-6.528,6.39v12.026c0,4.06,2.441,6.486,6.528,6.486Zm4.7-18.416v11.929c0,3.1-1.582,4.672-4.7,4.672h-9.805c-3.113,0-4.692-1.573-4.692-4.672V1298.39c0-3.1,1.578-4.672,4.692-4.672h9.8C282.461,1293.718,284.043,1295.291,284.043,1298.39Zm-5.013,12.138a.9.9,0,1,0,0-1.8h-9.163a.9.9,0,1,0,0,1.8Zm-9.163-5.266h9.163a.913.913,0,0,0,0-1.815h-9.163a.924.924,0,0,0-.878.422.909.909,0,0,0,0,.97.922.922,0,0,0,.878.422Zm9.152-5.265a.912.912,0,0,0,0-1.814h-3.486a.912.912,0,0,0,0,1.814Z" transform="translate(-262.995 -1291.904)"/></g></g></svg>
--- a/src/components/Drawer/mobile-danger-dark.svg
+++ b/src/components/Drawer/mobile-danger-dark.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="21.135" viewBox="0 0 22.879 21.135"><defs><style>.a{fill:#ffffff;}</style></defs><g transform="translate(-982.01 -1244.904)"><g transform="translate(982.01 1244.904)"><path class="a" d="M985.2,1266.039h-.13a3.239,3.239,0,0,1-.794-.145l-.255-.092a3.306,3.306,0,0,1-1.8-4.188l.074-.2,8.321-14.811a3.211,3.211,0,0,1,4.4-1.288,3.26,3.26,0,0,1,1.157,1.1l.1.178,8.376,14.916a3.315,3.315,0,0,1-.537,3.374,3.269,3.269,0,0,1-2.138,1.138l-.2.016Zm16.529-1.745a1.538,1.538,0,0,0,1.442-1.621,2.037,2.037,0,0,0-.036-.288l-.025-.116-8.333-14.822a1.508,1.508,0,0,0-2.069-.6h0a1.486,1.486,0,0,0-.5.465l-.094.152-8.278,14.706a1.532,1.532,0,0,0,1.163,2.107l.172.02h.036Zm-9.142-3.955a.872.872,0,0,1,.858-.879.861.861,0,0,1,.859.862v.017a.858.858,0,1,1-1.717,0Zm0-3.225-.007-.116v-3.6a.858.858,0,0,1,1.709-.116l.007.116V1257a.858.858,0,0,1-1.709.116Z" transform="translate(-982.01 -1244.904)"/></g></g></svg>
--- a/src/components/Drawer/mobile-home.svg
+++ b/src/components/Drawer/mobile-home.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22.88" height="24.085" viewBox="0 0 22.88 24.085"><defs><style>.a{fill:#4d4d4f;}</style></defs><path class="a" d="M472.9,1219.988h-2.4a2.194,2.194,0,0,1-2.156-2.034l-.012-.169v-3.446a.763.763,0,0,0-.65-.748l-.108-.012h-3.216a.763.763,0,0,0-.745.65l-.012.11v3.432a1.292,1.292,0,0,1-.024.216l-.012.025-.014.083a2.182,2.182,0,0,1-2.033,1.88l-.156.014h-2.156a4.71,4.71,0,0,1-4.708-4.456v-10.008a3.58,3.58,0,0,1,1.2-2.636l7.5-6.035a4.374,4.374,0,0,1,5.25-.146l.194.146,7.331,5.866a3.623,3.623,0,0,1,1.386,2.564l.012.241v9.768A4.716,4.716,0,0,1,472.9,1219.988Zm-8.718-8.08h3.4a2.452,2.452,0,0,1,2.432,2.253v3.625a.525.525,0,0,0,.421.517h2.239a3.018,3.018,0,0,0,3.021-2.818l.014-.191v-9.755a1.951,1.951,0,0,0-.6-1.359l-.156-.134-7.346-5.876a2.685,2.685,0,0,0-1.675-.583,2.725,2.725,0,0,0-1.5.449l-.182.134-7.321,5.9a1.87,1.87,0,0,0-.733,1.274l-.013.2v9.754a3.023,3.023,0,0,0,2.843,3.01h2.348a.515.515,0,0,0,.529-.431l.025-.217.013-.061v-3.251a2.422,2.422,0,0,1,2.251-2.436Z" transform="translate(-454.5 -1195.903)"/></svg>
--- a/src/components/Drawer/mobile-mail.svg
+++ b/src/components/Drawer/mobile-mail.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="24.075" viewBox="0 0 22.879 24.075"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0 0)"><g transform="translate(0 0)"><path class="a" d="M321.191,1315.979a3.189,3.189,0,0,1-2.27-.937,2.96,2.96,0,0,1-.885-2.1l-.011-.178a1.254,1.254,0,0,0-.178-.508,1.346,1.346,0,0,0-.828-.623,1.374,1.374,0,0,0-.343-.044,1.484,1.484,0,0,0-.74.206l-.213.1a3.22,3.22,0,0,1-2.16.154,3.139,3.139,0,0,1-1.89-1.461l-.767-1.3-.1-.191a3.048,3.048,0,0,1,1.239-3.972l.128-.078a1.345,1.345,0,0,0,.593-1.107,1.369,1.369,0,0,0-.722-1.189l-.188-.12a3.047,3.047,0,0,1-.92-4.1l.781-1.259a3.19,3.19,0,0,1,2.745-1.554,3.129,3.129,0,0,1,1.532.4l.16.083a1.306,1.306,0,0,0,.513.12,1.367,1.367,0,0,0,1.381-1.354v0l.01-.234a3.068,3.068,0,0,1,.905-1.919,3.2,3.2,0,0,1,2.231-.908h1.487a3.211,3.211,0,0,1,2.268.938,3.011,3.011,0,0,1,.892,2.167l.01.178a1.215,1.215,0,0,0,.173.5,1.373,1.373,0,0,0,1.175.662,1.471,1.471,0,0,0,.742-.207l.2-.1a3.2,3.2,0,0,1,4.078,1.257l.738,1.254c.019.034.036.069.052.1l.069.135a3.066,3.066,0,0,1-1.064,3.852l-.309.19a1.327,1.327,0,0,0-.4.429,1.308,1.308,0,0,0-.141,1.021,1.372,1.372,0,0,0,.674.837l.2.127a3.084,3.084,0,0,1,1.237,1.731,3.02,3.02,0,0,1-.327,2.357l-.794,1.3-.12.182a3.192,3.192,0,0,1-2.6,1.333,3.1,3.1,0,0,1-1.524-.4l-.165-.083a1.4,1.4,0,0,0-.524-.12h-.008a1.378,1.378,0,0,0-.963.392,1.357,1.357,0,0,0-.4,1l-.01.207a3.15,3.15,0,0,1-3.155,2.84Zm-3.709-6.032a3.127,3.127,0,0,1,1.9,1.43,2.985,2.985,0,0,1,.41,1.231l.024.426a1.367,1.367,0,0,0,1.371,1.2h1.487a1.358,1.358,0,0,0,1.372-1.2l.006-.131a3.071,3.071,0,0,1,.922-2.194,3.182,3.182,0,0,1,2.243-.9h.017a3.287,3.287,0,0,1,1.262.29l.38.19a1.4,1.4,0,0,0,.559.12,1.346,1.346,0,0,0,1.105-.55l.088-.133.775-1.266a1.324,1.324,0,0,0-.361-1.751l-.329-.2a3.085,3.085,0,0,1-1.278-1.76,3.043,3.043,0,0,1,.319-2.341,3.117,3.117,0,0,1,.955-1.009l.193-.12a1.324,1.324,0,0,0,.569-1.707l-.085-.16-.017-.037-.7-1.2a1.4,1.4,0,0,0-1.2-.683,1.33,1.33,0,0,0-.412.065l-.134.053-.12.061a3.213,3.213,0,0,1-2.388.328,3.159,3.159,0,0,1-1.926-1.421,2.978,2.978,0,0,1-.413-1.23l-.012-.3a1.342,1.342,0,0,0-.39-.981,1.4,1.4,0,0,0-.986-.408h-1.491a1.38,1.38,0,0,0-.97.395,1.324,1.324,0,0,0-.392.8l-.017.367a3.13,3.13,0,0,1-4.442,2.564l-.232-.12a1.4,1.4,0,0,0-.681-.178,1.413,1.413,0,0,0-1.21.7l-.781,1.257a1.325,1.325,0,0,0,.374,1.764l.314.195a3.069,3.069,0,0,1,1.389,2.563,3.107,3.107,0,0,1-1.394,2.563l-.188.12a1.316,1.316,0,0,0-.569,1.7l.067.128.758,1.281a1.368,1.368,0,0,0,.828.644,1.45,1.45,0,0,0,.386.052,1.3,1.3,0,0,0,.522-.108l.131-.062A3.191,3.191,0,0,1,317.482,1309.947Zm.443-6.005a4.017,4.017,0,1,1,4.1,3.934h-.087A3.979,3.979,0,0,1,317.925,1303.942Zm1.779,0a2.236,2.236,0,1,0,2.282-2.191h-.051A2.218,2.218,0,0,0,319.7,1303.942Z" transform="translate(-310.5 -1291.904)"/></g></g></svg>
--- a/src/components/Drawer/mobile-profile.svg
+++ b/src/components/Drawer/mobile-profile.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="21.872" viewBox="0 0 22.879 21.872"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M840.265,1313.317a3.332,3.332,0,0,1,0-6.315,16.841,16.841,0,0,1,6.416-.915h.366a15.914,15.914,0,0,1,6.153.943,3.318,3.318,0,0,1,.092,6.178,14.8,14.8,0,0,1-5.887.993l-.724.006A16.972,16.972,0,0,1,840.265,1313.317Zm1.213-4.913c-1.168.4-1.761.989-1.761,1.762,0,1.55,2.344,2.336,6.968,2.336a17.247,17.247,0,0,0,5.209-.6c1.168-.4,1.761-.99,1.761-1.762,0-1.55-2.344-2.336-6.97-2.336A17.31,17.31,0,0,0,841.478,1308.4Zm15.308,2.263a.858.858,0,0,1,.666-1.014c.88-.181,1.466-.475,1.622-.808a.935.935,0,0,0,0-.8c-.159-.335-.748-.628-1.636-.8a11.676,11.676,0,0,0-1.724-.248.86.86,0,0,1,.114-1.716h0a13.176,13.176,0,0,1,1.959.281,3.635,3.635,0,0,1,2.833,1.746,2.651,2.651,0,0,1,0,2.276,3.643,3.643,0,0,1-2.825,1.752.857.857,0,0,1-1.014-.667Zm-14.258-8.223a5.9,5.9,0,1,1,4.159,1.716A5.9,5.9,0,0,1,842.527,1302.444Zm1.214-7.105a4.185,4.185,0,1,0,2.945-1.213A4.137,4.137,0,0,0,843.741,1295.339Zm9.443,6.7a.858.858,0,0,1,.858-.858,2.914,2.914,0,0,0,0-5.828h0a.858.858,0,1,1,0-1.716,4.631,4.631,0,1,1,0,9.262.858.858,0,0,1-.858-.858Z" transform="translate(-837.997 -1292.36)"/></g></svg>
--- a/src/components/Drawer/orders-dark.svg
+++ b/src/components/Drawer/orders-dark.svg
@ -0,0 +1,11 @@
+<svg id="vuesax_linear_ranking" data-name="vuesax/linear/ranking" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="ranking">
+    <path id="Vector" d="M6.67,0H2A2.006,2.006,0,0,0,0,2V8H6.67Z" transform="translate(2 14)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M4.67,0H2A2.006,2.006,0,0,0,0,2V12H6.67V2A2,2,0,0,0,4.67,0Z" transform="translate(8.66 10)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M4.67,0H0V5H6.67V2A2.006,2.006,0,0,0,4.67,0Z" transform="translate(15.33 17)" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <g id="Group" transform="translate(8.994 1.644)">
+      <path id="Vector-4" data-name="Vector" d="M3.526.426l.53,1.06a.6.6,0,0,0,.42.31l.96.16c.61.1.76.55.32.98l-.75.75a.639.639,0,0,0-.16.54l.21.92c.17.73-.22,1.01-.86.63l-.9-.53a.618.618,0,0,0-.59,0l-.9.53c-.64.38-1.03.1-.86-.63l.21-.92A.63.63,0,0,0,1,3.686l-.74-.74c-.44-.44-.3-.88.32-.98l.96-.16a.666.666,0,0,0,.42-.31l.53-1.06C2.776-.144,3.236-.144,3.526.426Z" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    </g>
+    <path id="Vector-5" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
--- a/src/components/Drawer/orders.svg
+++ b/src/components/Drawer/orders.svg
@ -0,0 +1,11 @@
+<svg id="vuesax_linear_ranking" data-name="vuesax/linear/ranking" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="ranking">
+    <path id="Vector" d="M6.67,0H2A2.006,2.006,0,0,0,0,2V8H6.67Z" transform="translate(2 14)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M4.67,0H2A2.006,2.006,0,0,0,0,2V12H6.67V2A2,2,0,0,0,4.67,0Z" transform="translate(8.66 10)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M4.67,0H0V5H6.67V2A2.006,2.006,0,0,0,4.67,0Z" transform="translate(15.33 17)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <g id="Group" transform="translate(8.994 1.644)">
+      <path id="Vector-4" data-name="Vector" d="M3.526.426l.53,1.06a.6.6,0,0,0,.42.31l.96.16c.61.1.76.55.32.98l-.75.75a.639.639,0,0,0-.16.54l.21.92c.17.73-.22,1.01-.86.63l-.9-.53a.618.618,0,0,0-.59,0l-.9.53c-.64.38-1.03.1-.86-.63l.21-.92A.63.63,0,0,0,1,3.686l-.74-.74c-.44-.44-.3-.88.32-.98l.96-.16a.666.666,0,0,0,.42-.31l.53-1.06C2.776-.144,3.236-.144,3.526.426Z" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    </g>
+    <path id="Vector-5" data-name="Vector" d="M0,0H24V24H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="22.288" viewBox="0 0 22.879 22.288"><defs><style>.a{fill:#ffffff;}</style></defs><g transform="translate(-982.022 -1291.926)"><g transform="translate(982.022 1291.926)"><path class="a" d="M999.959,1314.214a4.943,4.943,0,0,0,4.941-4.711v-12.635a4.944,4.944,0,0,0-4.71-4.943h-5.665a4.943,4.943,0,0,0-4.938,4.709v1.272a.836.836,0,0,0,1.664.111l.008-.111v-1.039a3.271,3.271,0,0,1,3.073-3.271h5.626a3.271,3.271,0,0,1,3.27,3.078v12.6a3.27,3.27,0,0,1-3.077,3.271l-.193.006h-5.444a3.26,3.26,0,0,1-3.254-3.067v-1.242a.837.837,0,0,0-1.665-.111l-.007.111v1.051a4.933,4.933,0,0,0,4.686,4.925h5.683Zm-13.255-7.305a.836.836,0,0,0,.078-1.089l-.08-.095-1.828-1.821h11.394a.836.836,0,0,0,.111-1.664l-.111-.007h-11.4l1.83-1.82a.836.836,0,0,0,.085-1.089l-.081-.095a.836.836,0,0,0-1.088-.083l-.094.08-3.264,3.248a.832.832,0,0,0-.238.486h0v.019h0v.02h0v.064h0v.017h0v.066a.817.817,0,0,0,.081.281h0l.007.015.007.011h0l.009.016h0l.009.014h0l.01.016h0l.009.013h0l.008.012h0l.008.01h0a.851.851,0,0,0,.1.111l3.244,3.232a.834.834,0,0,0,1.18,0h0Z" transform="translate(-982.022 -1291.926)"/></g></g></svg>
				`@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="22.88" height="22.88" viewBox="0 0 22.88 22.88"><defs><style>.a,.b{fill:#4d4d4f;}.b{font-size:11px;font-family:SegoeUI-Bold, Segoe UI;font-weight:700;}</style></defs><g transform="translate(0)"><path class="a" d="M1.341,1.341H5.362V0H0V5.362H1.341Zm0,0" transform="translate(0 0)"/><path class="a" d="M392,0V1.341h4.022V5.362h1.341V0Zm0,0" transform="translate(-374.483 0)"/><path class="a" d="M396.022,396.022H392v1.341h5.362V392h-1.341Zm0,0" transform="translate(-374.483 -374.483)"/><path class="a" d="M1.341,392H0v5.362H5.362v-1.341H1.341Zm0,0" transform="translate(0 -374.483)"/><g transform="translate(4.388 4.363)"><text class="b" transform="translate(0 11)"><tspan x="0" y="0">A</tspan></text><text class="b" transform="translate(7.581 11)"><tspan x="0" y="0">R</tspan></text></g></g></svg>