reza fixed some bugs

src/assets/icons/mobileAr.svg

@@ -0,0 +1 @@
+<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>

src/assets/icons/mobileBasket.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:#4d4d4f;}</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>

src/assets/icons/mobileBlog.svg

@@ -0,0 +1 @@
+<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>

src/assets/icons/mobileDanger.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:#4d4d4f;}</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>

src/assets/icons/mobileHome.svg

@@ -0,0 +1 @@
+<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>

src/assets/icons/mobileLogout.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:#4d4d4f;}</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>

src/assets/icons/mobileMail.svg

@@ -0,0 +1 @@
+<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>

src/assets/icons/mobileProfile.svg

@@ -0,0 +1 @@
+<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>

src/components/CustomCheckbox/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import Checkbox from "@mui/material/Checkbox";
 
-export default function CustomCheckbox({ icon, checkedIcon }: any) {
+export default function CustomCheckbox({ icon, checkedIcon, checked, onChange }: any) {
   return (
     <>
-      <Checkbox icon={icon} checkedIcon={checkedIcon} />
+      <Checkbox icon={icon} checkedIcon={checkedIcon} onChange={onChange} checked={checked} />
     </>
     
   );

src/components/Navbar/index.tsx

@@ -1,9 +1,64 @@
-import React from "react";
+import React, { useState } from "react";
 import "./index.scss";
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
 import { Link } from "react-router-dom";
+import { SwipeableDrawer } from "@mui/material";
+import NavbarDrawer from "../NavbarDrawer/NavbarDrawer";
+import clsx from "clsx";
+import proxy from "../../redux/proxy";
+import { makeStyles } from "@mui/styles";
 
-export default function Navbar() {
+const useStyles = makeStyles({
+  list: {
+    width: window.innerWidth * 0.8,
+  },
+  fullList: {
+    width: "auto",
+    direction: "rtl",
+    textAlign: "right",
+  },
+});
+
+export default function Navbar(props: any) {
+  const status = proxy.status();
+  const classes = useStyles();
+  const [state, setState] = useState({
+    top: false,
+    left: false,
+    bottom: false,
+    right: false,
+    searchFlag: false,
+  });
+  const { page } = props;
+
+  const toggleDrawer = (anchor: any, open: any) => (event: any) => {
+    console.log('on');
+    if (
+      event &&
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      return;
+    }
+
+    setState({...state, [anchor]: open });
+  };
+
+  const list = (props: any, anchor: any) => (
+    <div
+      className={clsx(classes.list, {
+        [classes.fullList]: anchor === "top" || anchor === "bottom",
+      })}
+      role="presentation"
+    >
+      <NavbarDrawer
+        setShare={props.setShare}
+        user={props.user}
+        logout={props.logout}
+        needUpdate={props.needUpdate}
+      />
+    </div>
+  );
   return (
     <nav className="nav align-items-center justify-content-center">
       <div className="nav__container d-flex align-items-center justify-content-between">
@@ -19,7 +74,11 @@ export default function Navbar() {
             <Link to="/video-tube">دوره‌ها</Link>
           </li>
         </ul>
-        <MenuRoundedIcon className="mobile" style={{ color: "white", fontSize: 40 }} />
+        <MenuRoundedIcon
+          className="mobile"
+          style={{ color: "white", fontSize: 40 }}
+          onClick={toggleDrawer("right", true)}
+        />
         <ul className="nav__container--buttons d-flex align-items-center">
           <li className="nav___share desktop">
             <Link to="/subscribe">خرید اشتراک</Link>
@@ -29,6 +88,14 @@ export default function Navbar() {
           </li>
         </ul>
       </div>
+      <SwipeableDrawer
+        anchor="right"
+        open={state["right"]}
+        onClose={toggleDrawer("right", false)}
+        onOpen={toggleDrawer("right", true)}
+      >
+        {list(props, "right")}
+      </SwipeableDrawer>
     </nav>
   );
 }

src/components/NavbarDrawer/NavbarDrawer.scss

@@ -0,0 +1,151 @@
+.MuiDrawer-paperAnchorRight {
+  background: rgb(28, 28, 28) !important;
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0px;
+  }
+}
+.navbar-drawer {
+  font-family: numeralLight;
+  // background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important;
+  text-align: right !important;
+  direction: rtl;
+  padding: 30px 0px 10px 0px;
+  a {
+    text-decoration: none;
+  }
+  &__header {
+    height: 60px;
+    background-color: rgb(0, 0, 0);
+    width: 100%;
+    align-items: center;
+    padding: 0px 8px;
+    position: relative;
+    &--right {
+      margin-right: 10px;
+      & h1 {
+        margin-bottom: 0px;
+        font-size: 17px;
+        color: #4d4d4f;
+        letter-spacing: -1px;
+      }
+      & div {
+        color: #4d4d4f;
+        font-size: calc(100vw / 34);
+        letter-spacing: -1px;
+      }
+    }
+    &--dropdown {
+      position: absolute;
+      left: 0px;
+      top: 10px;
+      span {
+        background-color: #6cbe44;
+
+        color: white;
+        padding: 2px 4px;
+        border-radius: 7px;
+        font-size: 15px;
+      }
+    }
+    & img {
+      width: 100%;
+      height: 100%;
+      // position: relative;
+      // bottom: 35px;
+    }
+  }
+  &__dropdown {
+    width: calc(100vw * 0.8);
+    margin: 10px auto;
+    background-color: rgb(0, 0, 0);
+    .navbar-drawer-user {
+      padding: 10px 10px;
+      width: 100%;
+      position: relative;
+      &__right {
+        margin-right: 10px;
+        & h1 {
+          margin-bottom: 0px;
+          font-size: calc(100vw / 22);
+          color: #4d4d4f;
+          letter-spacing: -1px;
+        }
+        & div {
+          color: #4d4d4f;
+          font-size: calc(100vw / 34);
+          letter-spacing: -1px;
+        }
+      }
+    }
+  }
+  &__bottom {
+    width: 100%;
+    margin-top: 10px !important;
+    &--link {
+      width: 100%;
+      align-items: center;
+      padding: 15px 10px;
+      position: relative;
+      & img {
+        width: 20px;
+        height: 20px;
+        margin-left: 20px;
+      }
+      & .badge {
+        background-color: red;
+        margin: 5px;
+        position: absolute;
+        left: 5px;
+        top: 12px;
+      }
+    }
+    &--button {
+      width: 100%;
+      height: 100px;
+      color: white;
+      padding: 15px 10px;
+      cursor: pointer;
+      & img {
+        width: 20px;
+        height: 20px;
+        margin-left: 20px;
+      }
+    }
+    &--version {
+      position: absolute;
+      bottom: 5px;
+      left: 0px;
+      width: 100%;
+      height: 32px;
+      font-size: 14px;
+      justify-content: center;
+      align-items: center;
+      & span {
+        color: #cfcfcf;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.navbar-drawer__bottom a {
+  width: 100%;
+  height: 100px;
+  color: rgb(255, 255, 255);
+  text-decoration: none;
+}
+.navbar-drawer__bottom a:hover {
+  color: rgb(248, 248, 248);
+}
+
+.navbar-drawer__bottom--link .navbar-drawer__bottom--link div {
+  font-size: 16px;
+}
+
+
+@media screen and (max-width: 640px) {
+  .navbar-drawer__bottom a {
+    font-size: calc(100vw / 28);
+  }
+}

src/components/NavbarDrawer/NavbarDrawer.tsx

@@ -0,0 +1,306 @@
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import AddCircleOutlineRoundedIcon from "@mui/icons-material/AddCircleOutlineRounded";
+import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
+import Avatar from "@mui/material/Avatar";
+import CheckIcon from "@mui/icons-material/Check";
+
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { user } from "../../redux/actions";
+// import user1 from "~/assets/images/user1.png";
+// import user2 from "~/assets/images/user2.png";
+import mobileHome from "../../assets/icons/mobileHome.svg";
+import mobileAr from "../../assets/icons/mobileAr.svg";
+import qrcode from "../../assets/icons/drawer-qr.png";
+import mobileBasket from "../../assets/icons/mobileBasket.svg";
+import mobileBlog from "../../assets/icons/mobileBlog.svg";
+import mobileMail from "../../assets/icons/mobileMail.svg";
+import mobileProfile from "../../assets/icons/mobileProfile.svg";
+import mobileDanger from "../../assets/icons/mobileDanger.svg";
+import mobileLogout from "../../assets/icons/mobileLogout.svg";
+import proxy from "../../redux/proxy";
+
+import "./NavbarDrawer.scss";
+const NavbarDrawer = ({ status, logout }: any) => {
+  const [dropdown, setDropdown] = useState(false);
+  const links = [
+    {
+      name: "صفحه اصلی",
+      link: "/",
+      icon: <img src={mobileHome} alt="صفحه اصلی" />,
+      toast: "",
+      message: "",
+    },
+    {
+      name: "ورود یا ثبت نام",
+      link: "/auth",
+      icon: <img src={mobileLogout} alt="کتاب‌های من" />,
+      toast: "",
+      message: "",
+    },
+    {
+      name: "فروشگاه",
+      link: "/products",
+      icon: <img src={mobileBlog} alt="کتاب‌های من" />,
+      toast: "",
+      message: "",
+    },
+    {
+      name: "بلاگ",
+      link: "/blogs",
+      icon: <img src={mobileBlog} alt="بلاگ" />,
+      toast: "",
+      message: "",
+    },
+    {
+      name: "پشتیبانی",
+      link: "/support",
+      icon: <img src={mobileDanger} alt="پشتیبانی" />,
+      toast: "",
+      message: "",
+      // onClick: this.props.logout,
+    },
+  ];
+  const links2 = [
+    {
+      name: "صفحه اصلی",
+      link: "/",
+      icon: <img src={mobileHome} alt="صفحه اصلی" />,
+      toast: "",
+      message: "",
+    },
+    {
+      name : 'یوتیوب',
+      link: "/video-tube",
+      icon: <img src={mobileHome} alt="صفحه اصلی" />,
+      toast: "",
+      message: "",
+    },
+    {
+      name : 'خریداشتراک',
+      link: "/subscribe",
+      icon: <img src={mobileHome} alt="صفحه اصلی" />,
+      toast: "",
+      message: "",
+    },
+    {
+      name : 'سوالات متداول',
+      link: "/faq",
+      icon: <img src={mobileHome} alt="صفحه اصلی" />,
+      toast: "",
+      message: "",
+    },
+    {
+      name : 'صفحه محصول',
+      link: "/courses/1",
+      icon: <img src={mobileHome} alt="صفحه اصلی" />,
+      toast: "",
+      message: "",
+    },
+    // {
+    //   name: "واقعیت افزوده",
+    //   link: "/ar",
+    //   icon: <img src={mobileAr} alt="واقعیت افزوده" />,
+    //   toast: "",
+    //   message: "",
+    // },
+    // {
+    //   name: "بارکد خوان",
+    //   link: "/qr-scan",
+    //   icon: <img src={qrcode} alt="بارکد خوان" />,
+    //   toast: "",
+    //   message: "",
+    // },
+    // {
+    //   name: "کتاب‌های من",
+    //   link: "/mybooks",
+    //   icon: <img src={mobileBlog} alt="کتاب‌های من" />,
+    //   toast: "",
+    //   message: "",
+    // },
+    // {
+    //   name: "سبد خرید",
+    //   link: "/cart",
+    //   icon: <img src={mobileBasket} alt="فروشگاه" />,
+    //   toast: "",
+    //   message: "",
+    // },
+    // {
+    //   name: "بلاگ",
+    //   link: "/blogs",
+    //   icon: <img src={mobileBlog} alt="بلاگ" />,
+    //   toast: "",
+    //   message: "",
+    // },
+    // {
+    //   name: "دانوینی‌ها",
+    //   link: "/",
+    //   icon: <img src={mobileProfile} alt="دانوینی‌ها" />,
+    //   toast: "به زودی این بخش فعال می شود",
+    //   message: "به زودی",
+    // },
+    {
+      name: "تماس با ما",
+      link: "/contact",
+      icon: <img src={mobileDanger} alt="پشتیبانی" />,
+      toast: "",
+      message: "",
+      // onClick: this.props.logout,
+    },
+    // {
+    //   name: "ویرایش مشخصات",
+    //   link: "/profile",
+    //   icon: <img src={mobileMail} alt="ویرایش مشخصات" />,
+    //   toast: "",
+    //   // message: "4 پیام",
+    // },
+    // {
+    //   name: "بروز رسانی",
+    //   link: "/",
+    //   icon: <img src={mobileLogout} alt="خروج" />,
+    //   toast: "",
+    //   message: "",
+    //   onClick: () => {
+    //     window.location.reload();
+    //   },
+    // },
+    {
+      name: "خروج",
+      link: "/auth",
+      icon: <img src={mobileLogout} alt="خروج" />,
+      toast: "",
+      message: "",
+      onClick: () => {
+        logout({});
+      },
+    },
+  ];
+  const statusx = proxy.status();
+  let score = 2;
+
+  return (
+    <div className="navbar-drawer d-flex flex-column">
+      {statusx ? (
+        <div className="navbar-drawer__header d-flex align-items-center">
+          <>
+            <Avatar
+              style={{ width: 60, height: 60 }}
+              alt="Remy Sharp"
+              src={
+                status.picFileId
+                  ? `https://dnvn.ir/api/v1/file/${status.picFileId}`
+                  : ""
+              }
+            />
+
+            <div className="navbar-drawer__header--right d-fex flex-column">
+              <h1>{status.firstName + " " + status.lastName}</h1>
+            </div>
+          </>
+
+          {dropdown ? (
+            <div
+              className="navbar-drawer__header--dropdown"
+              onClick={() => setDropdown(false)}
+            >
+              {score ? <span>{score} امتیاز</span> : null}
+              <KeyboardArrowUpIcon style={{ color: "grey", fontSize: 30 }} />
+            </div>
+          ) : (
+            <div
+              className="navbar-drawer__header--dropdown"
+              onClick={() => setDropdown(true)}
+            >
+              {score ? <span>{score} امتیاز</span> : null}{" "}
+              <KeyboardArrowDownIcon style={{ color: "grey", fontSize: 30 }} />
+            </div>
+          )}
+        </div>
+      ) : null}
+      {dropdown ? (
+        <div className="navbar-drawer__dropdown d-flex flex-column">
+          {/* {this.props.users.map((item, i) => (
+              <User data={item} key={i} />
+            ))} */}
+          <Link
+            to={"/newProfile"}
+            // key={this.props.users.length + 1}
+            style={{ color: "#4e4e4e" }}
+          >
+            <div className="navbar-drawer__bottom--link d-flex">
+              <AddCircleOutlineRoundedIcon
+                style={{ fontSize: 30, color: "#777", margin: "0px 8px" }}
+              />
+              <div>اضافه کردن کاربر </div>
+              {/* {item.message && <div class="badge">{item.message}</div>} */}
+            </div>
+          </Link>
+        </div>
+      ) : null}
+      <div className="navbar-drawer__bottom mt-3">
+        {(true ? links2 : links).map((item: any, key: any) => (
+          <Link
+            to={item.link}
+            key={key}
+            onClick={
+              item.onClick ||
+              (() => (item.link === "" ? toast.error(item.toast) : null))
+            }
+          >
+            <div className="navbar-drawer__bottom--link d-flex">
+              {item.icon}
+              <div>{item.name}</div>
+              {item.message && <div className="badge">{item.message}</div>}
+            </div>
+          </Link>
+        ))}
+
+        {/* <div className="navbar-drawer__bottom--version d-flex">
+            <span>نسخه نرم‌افزار 3.1</span>
+          </div> */}
+      </div>
+    </div>
+  );
+};
+
+export default connect((state: any) => ({ status: state.user.status }), {
+  logout: user.logout,
+})(NavbarDrawer);
+
+const User = (props: any) => {
+  return (
+    <div
+      className="navbar-drawer-user d-flex align-items-center"
+      style={{ backgroundColor: props.data.status === 1 ? "#eee" : "white" }}
+    >
+      <Avatar
+        style={{ width: 55, height: 55 }}
+        alt={props.data.firstName + " " + props.data.lastName}
+        src={props.data.image}
+      />
+      <div className="navbar-drawer-user__right d-flex flex-column">
+        <h1
+          style={{
+            color: props.data.status === 1 ? "#00CC69" : "#4D4D4F",
+          }}
+        >
+          {props.data.firstName + " " + props.data.lastName}
+        </h1>
+        <div
+          style={{
+            color: props.data.status === 1 ? "#00CC69" : "#4D4D4F",
+          }}
+        >
+          {props.data.title}
+        </div>
+      </div>
+      {props.data.status === 1 ? (
+        <div style={{ position: "absolute", left: 24, top: 16 }}>
+          <CheckIcon style={{ fontSize: 40, color: "#00CC69" }} />
+        </div>
+      ) : null}
+    </div>
+  );
+};

src/redux/actions-type/public.tsx

@@ -18,6 +18,11 @@ interface setFaqActive{
   data : any
 }
 
+interface setSubscribe{
+  type: "public/setSubscribe"
+  data: any
+}
+
 interface error{
   type : "error"
   data : undefined
@@ -28,11 +33,12 @@ interface loading{
   data : undefined
 }
 
+
 // interface filterNewProducts{
 
 // }
 
 
-type PublicAction = getBlogList | getBlogInfo | getHomeData | setFaqActive | loading | error;
+type PublicAction = getBlogList | getBlogInfo | setSubscribe | getHomeData | setFaqActive | loading | error;
 
 export default PublicAction;

src/redux/actions/public.tsx

@@ -1,11 +1,11 @@
 import { Dispatch } from "redux";
 import proxy from "../proxy";
 const publicApi = {
-  getHomeData: (data: undefined, history: any) => async (dispatch: Dispatch) =>
-    await proxy.get("public/homePage", data, { history, dispatch }),
+  getHomeData: (data: undefined) => async (dispatch: Dispatch) =>
+    await proxy.get("public/homePage", data, { dispatch }),
 
-  // getFaqList: (data: undefined, history: any) => async (dispatch: Dispatch) =>
-  //   await proxy.get("faq/list", data, { history, dispatch }),
+  // getFaqList: (data: undefined) => async (dispatch: Dispatch) =>
+  //   await proxy.get("faq/list", data, { dispatch }),
 
   setFaqActive: (data: {}) => async (dispatch: Dispatch) =>
     await dispatch({ type: "public/faq/activate", data: data }),
@@ -14,19 +14,20 @@ const publicApi = {
   //   await dispatch({ type: "public/faq/search", data: data }),
 
   // getContactData:
-  //   (data = {}, history: any) =>
+  //   (data = {}) =>
   //   async (dispatch: Dispatch) =>
-  //     await proxy.get("public/contact", data, { history, dispatch }),
+  //     await proxy.get("public/contact", data, { dispatch }),
 
-  // getArList: (data: undefined, history: any) => async (dispatch: Dispatch) =>
-  //   await proxy.get("public/ar", data, { history, dispatch }),
+  // getArList: (data: undefined) => async (dispatch: Dispatch) =>
+  //   await proxy.get("public/ar", data, { dispatch }),
 
-  getBlogList: (data: undefined, history: any) => async (dispatch: Dispatch) =>
-    await proxy.get("public/blogList", data, { history, dispatch }),
-
-  getBlogInfo: (data: String, history: any) => async (dispatch: Dispatch) =>
-    await proxy.get("public/blogInfo", data, { history, dispatch }),
+  getBlogList: (data: undefined) => async (dispatch: Dispatch) =>
+    await proxy.get("public/blogList", data, { dispatch }),
 
+  getBlogInfo: (data: String) => async (dispatch: Dispatch) =>
+    await proxy.get("public/blogInfo", data, { dispatch }),
+  setSubscribe : (data: Object) => async (dispatch: Dispatch) =>
+  await dispatch({type : "public/setSubscribe", data : data}),
   // filterNewProducts: (data: Object) => async (dispatch: Dispatch) =>
   //   await dispatch({ type: "public/filter", data: data }),
 };

src/redux/reducers/public.tsx

@@ -39,7 +39,7 @@ const initialState = {
       off: 0,
     },
   ],
-  selectedSubscripe: {
+  selectedSubscribe: {
     id: 0,
     name: "اشتراک 3 ماهه",
     finalPrice: "19.000",
@@ -257,6 +257,8 @@ export default function publicApi(state = initialState, action: PublicAction) {
       return { ...state, loading: false, error: null, blogList: data };
     case "public/blogInfo":
       return { ...state, loading: false, error: null, blog: data };
+    case "public/setSubscribe":
+      return { ...state, loading: false, error: null, selectedSubscribe : data };
     case "loading":
       return { ...state, loading: true };
     case "error":

src/views/Faq/index.tsx

@@ -5,7 +5,7 @@ import search from "../../assets/icons/search.png";
 import dropdown from "../../assets/icons/dropdown.png";
 import whiteDropdown from "../../assets/icons/white-dropdown.png";
 import { connect } from "react-redux";
-import {publicApi} from '../../redux/actions';
+import { publicApi } from "../../redux/actions";
 import scroll from "../../util/scroll.js";
 import "./index.scss";
 
@@ -34,7 +34,10 @@ function Faq({ list, setFaqActive }: any) {
         <ul className="faq__list d-flex flex-column">
           {list.map((item: any, i: any) => (
             <li className="d-flex flex-column" key={i}>
-              <div className="faq__list--itemHeader d-flex align-items-center justify-content-between p-4" onClick={() => setFaqActive(item.id) }>
+              <div
+                className="faq__list--itemHeader d-flex align-items-center justify-content-between p-4"
+                onClick={() => setFaqActive(item.id)}
+              >
                 <strong>{item.name}</strong>
                 {item.active ? (
                   <img src={dropdown} alt="" />
@@ -56,6 +59,9 @@ function Faq({ list, setFaqActive }: any) {
   );
 }
 
-export default connect((state: any) => ({
-  list: state.publicApi.faqList,
-}), {setFaqActive : publicApi.setFaqActive,})(Faq);
+export default connect(
+  (state: any) => ({
+    list: state.publicApi.faqList,
+  }),
+  { setFaqActive: publicApi.setFaqActive }
+)(Faq);

src/views/Home/AppDownload/index.tsx

@@ -5,7 +5,7 @@ import "./index.scss";
 
 export default function AppDownload() {
   return (
-    <section className="app-download d-flex justify-content-between align-items-center">
+    <section className="app-download desktop justify-content-between align-items-center">
       <h1>
         اینجا جایگاه یک <br /> متن ویژه است که باید در این <br /> قسمت قرار
         بگیرد.

src/views/Home/Blogs/index.tsx

@@ -25,32 +25,32 @@ function Blogs(props: any) {
     props.getList();
   }, []);
   return (
-      <section className="home-blogs d-flex flex-column">
-        <header className="d-flex flex-column">
-          <h1>پیشنهادی برای شما</h1>
-        </header>
-        {window.innerWidth > 1007 ? (
-          <Carousell
-            itemsToShow={slideNumberHandler()}
-            isRTL={true}
-            enableTilt={false}
-            showArrows={false}
-            pagination={false}
-          >
-            {list?.map((item: Object, i: Number) => (
-              <Blog data={item} key={i} />
-            ))}
-          </Carousell>
-        ) : (
-          <Carousel
-            autoplay={false}
-            arrows={false}
-            slides={list?.map((item: Object, i: Number) => (
-              <Blog data={item} key={i} />
-            ))}
-          />
-        )}
-      </section>
+    <section className="home-blogs d-flex flex-column">
+      <header className="d-flex flex-column">
+        <h1>پیشنهادی برای شما</h1>
+      </header>
+      {window.innerWidth > 1007 ? (
+        <Carousell
+          itemsToShow={slideNumberHandler()}
+          isRTL={true}
+          enableTilt={false}
+          showArrows={false}
+          pagination={false}
+        >
+          {list?.map((item: Object, i: Number) => (
+            <Blog data={item} key={i} />
+          ))}
+        </Carousell>
+      ) : (
+        <Carousel
+          autoplay={false}
+          arrows={false}
+          slides={list?.map((item: Object, i: Number) => (
+            <Blog data={item} key={i} />
+          ))}
+        />
+      )}
+    </section>
   );
 }
 

src/views/Home/Books/Book/index.tsx

@@ -6,7 +6,7 @@ export default function Book(props: any) {
   const { data } = props;
   return (
     <Link to={`/courses/${data.id}`} className="home-books-book d-flex flex-column" draggable={'false'}>
-      <img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt={data.name} draggable={'false'} />
+      <img src={data.imageUrl} alt={data.name} draggable={'false'} />
       <footer className="d-flex">
         <div className="home-books-book__info d-flex flex-column">
           <h2>{data.name}</h2>

src/views/Home/index.tsx

@@ -10,7 +10,7 @@ import Footer from "./Footer/index";
 import Header from "./Header/index";
 import AppDownload from "./AppDownload/index";
 import Vocal from "../../components/Vocal/Vocal";
-import scroll from '../../util/scroll';
+import scroll from "../../util/scroll";
 
 import olum7 from "../../assets/images/olum7.jpg";
 import olum8 from "../../assets/images/olum8.jpg";
@@ -20,11 +20,10 @@ import blog1 from "../../assets/images/blog1.png";
 import blog2 from "../../assets/images/blog2.png";
 import blog3 from "../../assets/images/blog3.png";
 
-export default function Home(props: any) {
+export default function Home({ courses, grades, headerData, blogs }: any) {
   const [grade, setGrade] = useState(null);
   const [vocal, setVocal] = useState(false);
   const [inputValue, setInputValue] = useState("");
-  const { courses, grades, headerData, blogs } = props;
 
   useEffect(() => {
     if (inputValue) {
@@ -33,7 +32,7 @@ export default function Home(props: any) {
   }, [inputValue]);
   useEffect(() => {
     scroll.goToTop();
-  },[])
+  }, []);
   return (
     <>
       <div
@@ -41,7 +40,9 @@ export default function Home(props: any) {
         style={{ filter: vocal ? "blur(8px)" : "" }}
       >
         <Navbar />
-        {window.innerWidth > 1007 ? <Header headerData={headerData} /> : null}
+        <div className="desktop">
+          <Header headerData={headerData} />
+        </div>
         <HomeSearchBox
           setVocal={setVocal}
           inputValue={inputValue}
@@ -51,13 +52,12 @@ export default function Home(props: any) {
         <GradeFilter grades={grades} grade={grade} setGrade={setGrade} />
         <Books courses={courses} />
         <Blogs blogs={blogs} />
-        {window.innerWidth > 1007 ? <AppDownload /> : null}
-        {window.innerWidth > 1007 ? <Footer /> : null}
-        
+        <AppDownload />
+        <Footer />
       </div>
       {vocal ? (
-          <Vocal setVocal={setVocal} setInputValue={setInputValue} />
-        ) : null}
+        <Vocal setVocal={setVocal} setInputValue={setInputValue} />
+      ) : null}
     </>
   );
 }

src/views/Subscription/SubscribeRadio/index.tsx

@@ -4,14 +4,15 @@ import CustomCheckbox from "../../../components/CustomCheckbox";
 import CircleRoundedIcon from "@mui/icons-material/CircleRounded";
 import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded";
 import { connect } from "react-redux";
+import {publicApi} from '../../../redux/actions';
 
-function SubscribeRadio({ data, selectedSubscripe }: any) {
+function SubscribeRadio({ data, selectedSubscribe, setSubscribe }: any) {
   return (
     <div
       className={
         "subscribe-radio d-flex" +
         " " +
-        (selectedSubscripe.id === data.id ? "subscribe-radio-active" : "")
+        (selectedSubscribe.id === data.id ? "subscribe-radio-active" : "")
       }
     >
       <div className="subscribe-radio__name d-flex align-items-center">
@@ -26,13 +27,20 @@ function SubscribeRadio({ data, selectedSubscripe }: any) {
               style={{ color: "white", fontSize: 50, padding: 0 }}
             />
           }
+          checked={selectedSubscribe.id === data.id}
+          onChange={() =>  
+            selectedSubscribe.id === data.id ? setSubscribe({}) : setSubscribe(data)
+          }
         />
         <h2>{data.name}</h2>
       </div>
       <div className="subscribe-radio__factor d-flex flex-column justify-content-center">
         {data.offPercent !== 0 && (
           <div className="subscribe-radio__factor--off d-flex align-items-center">
-            <b>{data.off}<span></span></b>
+            <b>
+              {data.off}
+              <span></span>
+            </b>
             <i>تومان</i>
           </div>
         )}
@@ -52,5 +60,5 @@ export default connect(
   (state: any) => ({
     selectedSubscripe: state.publicApi.selectedSubscripe,
   }),
-  {}
+  {setSubscribe : publicApi.setSubscribe,}
 )(SubscribeRadio);

src/views/Subscription/index.tsx

@@ -7,7 +7,7 @@ import {connect} from 'react-redux';
 import scroll from '../../util/scroll';
 import "./index.scss";
 
-function Subscription({subscribes} : any) {
+function Subscription({subscribes, selectedSubscribe} : any) {
   useEffect(() => {
     scroll.goToTop();
   },[])
@@ -23,7 +23,7 @@ function Subscription({subscribes} : any) {
         </p>
         {
           subscribes?.map((subscribe : any , i : any) => (
-            <SubscribeRadio data={subscribe} />
+            <SubscribeRadio data={subscribe} selectedSubscribe={selectedSubscribe} />
           ))
         }
         <DiscountCode />
@@ -38,4 +38,5 @@ function Subscription({subscribes} : any) {
 
 export default connect((state : any) => ({
   subscribes : state.publicApi.mockSubscribes,
+  selectedSubscribe : state.publicApi.selectedSubscribe
 }), {})(Subscription);