From 2bc0a72ba679b681efd863a576917a6b6c2db105 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Sat, 19 Feb 2022 17:13:23 +0330 Subject: [PATCH] Mobile Side Menu Feature Added --- src/components/exam/resault/index.js | 2 +- src/components/header/Header.js | 25 +- src/components/header/MobileSideMenu/index.js | 10 + src/view/services/index.js | 291 ++++++++++-------- src/view/services/service/index.js | 12 +- tailwind.config.js | 4 +- 6 files changed, 199 insertions(+), 145 deletions(-) create mode 100644 src/components/header/MobileSideMenu/index.js diff --git a/src/components/exam/resault/index.js b/src/components/exam/resault/index.js index 31ac4f2..a636b81 100644 --- a/src/components/exam/resault/index.js +++ b/src/components/exam/resault/index.js @@ -89,7 +89,7 @@ const ExamResults = ({

نتایج آزمون‌ها

- { + {isMobile &&

مشاهده بیشتر

diff --git a/src/components/header/Header.js b/src/components/header/Header.js index c5da452..75371ce 100644 --- a/src/components/header/Header.js +++ b/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 ( -
+ <> + +
{ isMobile ?
-
+
setMenuPopup(!menuPopup)}> @@ -35,6 +38,7 @@ const Header = ({
+
@@ -44,6 +48,7 @@ const Header = ({
+
: <>
@@ -92,6 +97,20 @@ const Header = ({ />
*/}
+ { + isMobile && menuPopup && + <> +
+
+ + +
+ + } + ); } diff --git a/src/components/header/MobileSideMenu/index.js b/src/components/header/MobileSideMenu/index.js new file mode 100644 index 0000000..2b9465c --- /dev/null +++ b/src/components/header/MobileSideMenu/index.js @@ -0,0 +1,10 @@ +import React from "react"; + +const MobileSideMenu = () => { + return ( +
+ +
+ ) +} +export default MobileSideMenu; \ No newline at end of file diff --git a/src/view/services/index.js b/src/view/services/index.js index c65cd5c..f3c908a 100644 --- a/src/view/services/index.js +++ b/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) => { - setFilter({ ...filter, [name]: value }); - }; + // const onChange = (name, value) => { + // setFilter({ ...filter, [name]: value }); + // }; useEffect(() => { getList(); @@ -439,144 +432,146 @@ if (!isMobile){ />
-
- - + - - - - - + + + - - - - -
- setFilterCheck([ - ...prevState, - (filterCheck[0] = !filterCheck[0]), - ]) - } - > -

آنلاین

- {filterCheck[0] && ( -
-
- + opacity="0" + /> + - + + + + +
+ setFilterCheck([ + ...prevState, + (filterCheck[0] = !filterCheck[0]), + ]) + } + > +

آنلاین

+ {filterCheck[0] && ( +
+
+ + + +
-
- - - )} -
-
- setFilterCheck([ - ...prevState, - (filterCheck[0] = !filterCheck[0]), - ]) - } - > -

حضوری

- {filterCheck[0] && ( -
-
- - - + + + )} +
+
+ setFilterCheck([ + ...prevState, + (filterCheck[0] = !filterCheck[0]), + ]) + } + > +

حضوری

+ {filterCheck[0] && ( +
+
+ + + +
-
- - - )} + + + )} +
-
+ }
))} + { + gameId == 6 && +
+ +
+

افزایش مبلغ دلخواه

+

لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید

+
+
+

ریال

+
+
+

بابت

+ +
+ + +
+ }
) diff --git a/src/view/services/service/index.js b/src/view/services/service/index.js index d38ed6d..c8742c4 100644 --- a/src/view/services/service/index.js +++ b/src/view/services/service/index.js @@ -21,11 +21,11 @@ const servicePopUp = ({
-
- { content.id !== 3 &&
+
+ { content.id !== 3 &&

- {content.id == 1 ? 'کلاس آنلاین ' : content.id == 4 ? 'کتاب ' : null} + {content.id === 1 ? 'کلاس آنلاین ' : content.id === 4 ? 'کتاب ' : null} {content.title}

@@ -52,7 +52,7 @@ const servicePopUp = ({

} { - content.id == 3 && + content.id === 3 &&

آزمون {content.title}

@@ -87,7 +87,7 @@ const servicePopUp = ({
} - {content.id == 1 &&
diff --git a/tailwind.config.js b/tailwind.config.js index 441925c..9aaa4d1 100644 --- a/tailwind.config.js +++ b/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: {