Mobile Side Menu Feature Added

src/components/exam/resault/index.js

@@ -89,7 +89,7 @@ const ExamResults = ({
     <div className="exam-result bg-white rounded-lg">
       <div className={`w-full ${isMobile && 'text-xl flex justify-between items-center'} text-red52 text-right px-4 font-bold`}>
         <p>نتایج آزمون‌ها</p>
-        {
+        {isMobile &&
             <p className="text-sm">
               مشاهده بیشتر
             </p>

src/components/header/Header.js

@@ -4,7 +4,7 @@ import moment from "jalali-moment";
 import { useState } from 'react';
 import avatar1 from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg";
 import logoIcon from '../../assets/img/logo.png';
-
+import MobileSideMenu from './MobileSideMenu';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -20,13 +20,16 @@ const Header = ({
   let weekdayList = ["یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", 'پنج‌شنبه', 'جمعه', "شنبه"];
   console.log("weekday:");
   console.log(weekday);
+  const [menuPopup, setMenuPopup] = useState(false);
   return (
+    <>
+    
     <div className={`header w-full h-[8.5%] z-10 bg-white fixed top-0 left-0 flex items-center ${!isMobile && 'shadow-md'}`}>
 
       {
         isMobile ?
           <div className='flex w-full items-center justify-between rtl px-4'>
-            <div>
+            <div onClick={() => setMenuPopup(!menuPopup)}>
               <svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M3 5H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
                 <path d="M3 10H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
@@ -35,6 +38,7 @@ const Header = ({
               </svg>
             </div>
             <Link to='/'>  <img src={logoIcon} className="h-10"/> </Link>
+            <Link to='/shoppingCart'>
             <div>
             <svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
@@ -44,6 +48,7 @@ const Header = ({
 </svg>
 
               </div>
+              </Link>
           </div> :
           <>
             <div className="header-profile  h-full flex items-center">
@@ -92,6 +97,20 @@ const Header = ({
         />
       </div> */}
     </div>
+    {
+      isMobile && menuPopup && 
+      <>
+      <div className='h-screen top-0 w-full z-30 backdrop-blur fixed'></div>
+      <div className='w-full flex'>
+      <MobileSideMenu />
+      <button className='flex items-center justify-center fixed z-40 top-10 left-5 text-xl font-bold text-red52 w-12 h-12 rounded-xl bg-pinkF5'
+        onClick={() => setMenuPopup(false)}
+
+      >X</button>
+      </div>
+      </>
+    }
+    </>
   );
 }
 

src/components/header/MobileSideMenu/index.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+const MobileSideMenu = () => {
+    return (
+        <div className="flex flex-col w-2/3 h-screen top-0 right-0 fixed bg-white z-40">
+                
+        </div>
+    )
+}
+export default MobileSideMenu;

src/view/services/index.js

@@ -3,7 +3,7 @@ import { book, publicApi, userProduct } from "../../redux/actions";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import Product from "../../components/Product";
-import ScrollContainer from 'react-indiana-drag-scroll'
+// import ScrollContainer from 'react-indiana-drag-scroll'
 
 
 import img1 from "../../assets/img/Group 1344.svg";
@@ -15,7 +15,7 @@ import img6 from "../../assets/img/Group 1362.svg";
 import ShoppingCart from "../../components/ShoppingCart";
 import ServicePopUp from "./service";
 import Games from "../dashboard2/Games";
-import Packages from "../dashboard2/Packages";
+// import Packages from "../dashboard2/Packages";
 
 
 
@@ -34,14 +34,7 @@ const Services = ({
   videos,
   pushToCart,
 }) => {
-  const [checked, setChecked] = useState([
+ 
-    false,
-    false,
-    false,
-    false,
-    false,
-    false,
-  ]);
   const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
   const [filter, setFilter] = useState({
     search: "",
@@ -61,9 +54,9 @@ const Services = ({
     classMinute: "",
   });
 
-  const onChange = (name, value) => {
+  // const onChange = (name, value) => {
-    setFilter({ ...filter, [name]: value });
+  //   setFilter({ ...filter, [name]: value });
-  };
+  // };
 
   useEffect(() => {
     getList();
@@ -439,7 +432,8 @@ if (!isMobile){
           />
           <div className="w-11/12 border-b border-gray-200"></div>
 
-          <div className="flex items-center  mx-4 my-4">
+          {
+            gameId !== 6 && <div className="flex items-center  mx-4 my-4">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="40"
@@ -577,6 +571,7 @@ if (!isMobile){
                 )}
               </div>
             </div>
+          }
           <div className="w-11/12 border-b border-gray-200"></div>
 
           <div
@@ -652,6 +647,34 @@ if (!isMobile){
               />
             </Link>
           ))}
+          {
+            gameId == 6 &&  
+            <div className="w-full p-8 py-10 flex flex-col  justify-between items-center  " >
+
+              <div className="w-full text-right mb-4">
+                <h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1>
+                <p className="text-red26 text-sm">لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید</p>
+                </div>
+                <div className="flex w-full mb-4">
+                  <input 
+                  placeholder="12,000,000"
+                  className="border border-red5B rounded-lg h-14 w-3/4 text-center rounded-l-none border-l-0 px-4 outline-none"
+                  /><p className="border flex justify-center items-center border-red5B rounded-lg h-14 w-1/4 text-center rounded-r-none border-r-0 px-4">ریال</p>
+                </div> 
+                <div className="flex w-full mb-4">
+                <p className="border flex justify-center items-center border-red52 rounded-lg h-14 w-1/5 text-center rounded-l-none border-l-0 px-10">بابت</p>
+                  <input 
+                  placeholder="شارژ حساب"
+                  className="border border-red52 rounded-lg h-14 w-4/5 text-center rounded-r-none border-r-0 px-4 outline-none"
+                  />
+                </div>  
+                <button className="cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14"
+                 style={{background: 'rgba(211, 246, 255, 0.44)'}}>
+                   افزودن به سبد خرید
+                   </button>
+
+            </div>
+          }
 </div>
     </div>
     )

src/view/services/service/index.js

@@ -21,11 +21,11 @@ const servicePopUp = ({
                         </svg>
                     </div>
                 </div>
-                <div className={`flex justify-${content.id == 3 ? 'center' : 'between'} mb-20`} style={{direction: content.id == 1 ? 'rtl' : 'ltr'}} >
+                <div className={`flex justify-${content.id === 3 ? 'center' : 'between'} mb-20`} style={{direction: content.id === 1 ? 'rtl' : 'ltr'}} >
-                        { content.id !== 3 && <div className={`${content.id == 1 ? 'w-1/2' : content.id == 4 ? 'w-2/3' : 'w-full'} my-4  p-2`}>
+                        { content.id !== 3 && <div className={`${content.id === 1 ? 'w-1/2' : content.id === 4 ? 'w-2/3' : 'w-full'} my-4  p-2`}>
                         <h1 className="text-red25 font-black text-md">
                             
-                            {content.id == 1 ? 'کلاس آنلاین  ' : content.id == 4 ? 'کتاب ' : null}
+                            {content.id === 1 ? 'کلاس آنلاین  ' : content.id === 4 ? 'کتاب ' : null}
                             
                             {content.title}</h1>
                         <p className="text-red26 text-sm my-2">
@@ -52,7 +52,7 @@ const servicePopUp = ({
 
                     </div>}
                     {
-                        content.id == 3 && 
+                        content.id === 3 && 
                         <div className="flex w-11/12 flex-col rounded-xl border border-red82OP">
                             <h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl text-blueE3 text-xl font-bold">آزمون {content.title}</h1>
                             <div className="flex w-full border-b border-red82OP text-red26 text-sm font-bold" style={{direction : 'rtl'}}>
@@ -87,7 +87,7 @@ const servicePopUp = ({
                             </div>
                     }
                     
-                   {content.id == 1 && <video className="w-1/2 rounded-md" controls>
+                   {content.id === 1 && <video className="w-1/2 rounded-md" controls>
                         <source
                             src={`https://dnvn.ir/api/v1/file/20540`}
                             type="video/mp4"
@@ -95,7 +95,7 @@ const servicePopUp = ({
                     </video>}
 
                     {
-                        content.id == 4 && <img src={content.image} className="w-1/3 rounded mt-4"/>
+                        content.id === 4 && <img src={content.image} className="w-1/3 rounded mt-4" alt="Content"/>
                     }
                 </div>
                 <div className="flex w-full items-center justify-start mb-8" style={{direction: 'ltr'}}>

tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
         red26: '#521326',
         red25: '#752525',
         red52: '#df1452',
+        red5B : '#c82b5b',
         red46OP: 'rgba(255, 246, 246, 0.8)',
         grayEC: '#ececec',
         red82OP: 'rgba(223, 20, 82, 0.08)',
@@ -39,7 +40,8 @@ module.exports = {
         blue7E : '#15517e',
         blueFF : '#f2f9ff',
         blueE3 : '#4c7fe3',
-        blueDF : '#14b5df'
+        blueDF : '#14b5df',
+        blue52 : '#132c52'
       },
     },
     screens: {