diff --git a/src/assets/icons/drawer-qr.png b/src/assets/icons/drawer-qr.png new file mode 100644 index 0000000..d20e2b0 Binary files /dev/null and b/src/assets/icons/drawer-qr.png differ diff --git a/src/assets/icons/mobileAr.svg b/src/assets/icons/mobileAr.svg new file mode 100644 index 0000000..84c5a51 --- /dev/null +++ b/src/assets/icons/mobileAr.svg @@ -0,0 +1 @@ +AR \ No newline at end of file diff --git a/src/assets/icons/mobileBasket.svg b/src/assets/icons/mobileBasket.svg new file mode 100644 index 0000000..eafad9f --- /dev/null +++ b/src/assets/icons/mobileBasket.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileBlog.svg b/src/assets/icons/mobileBlog.svg new file mode 100644 index 0000000..ac1ec9f --- /dev/null +++ b/src/assets/icons/mobileBlog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileDanger.svg b/src/assets/icons/mobileDanger.svg new file mode 100644 index 0000000..9cc5e0e --- /dev/null +++ b/src/assets/icons/mobileDanger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileHome.svg b/src/assets/icons/mobileHome.svg new file mode 100644 index 0000000..ded13a2 --- /dev/null +++ b/src/assets/icons/mobileHome.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileLogout.svg b/src/assets/icons/mobileLogout.svg new file mode 100644 index 0000000..04d6d86 --- /dev/null +++ b/src/assets/icons/mobileLogout.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileMail.svg b/src/assets/icons/mobileMail.svg new file mode 100644 index 0000000..2554836 --- /dev/null +++ b/src/assets/icons/mobileMail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/mobileProfile.svg b/src/assets/icons/mobileProfile.svg new file mode 100644 index 0000000..2fddb7a --- /dev/null +++ b/src/assets/icons/mobileProfile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/CustomCheckbox/index.tsx b/src/components/CustomCheckbox/index.tsx index 553b401..8b9d76b 100644 --- a/src/components/CustomCheckbox/index.tsx +++ b/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 ( <> - + ); diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index ec4e77a..ba8643f 100644 --- a/src/components/Navbar/index.tsx +++ b/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) => ( +
+ +
+ ); return ( ); } diff --git a/src/components/NavbarDrawer/NavbarDrawer.scss b/src/components/NavbarDrawer/NavbarDrawer.scss new file mode 100644 index 0000000..726bf63 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/components/NavbarDrawer/NavbarDrawer.tsx b/src/components/NavbarDrawer/NavbarDrawer.tsx new file mode 100644 index 0000000..e673bcc --- /dev/null +++ b/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: صفحه اصلی, + toast: "", + message: "", + }, + { + name: "ورود یا ثبت نام", + link: "/auth", + icon: کتاب‌های من, + toast: "", + message: "", + }, + { + name: "فروشگاه", + link: "/products", + icon: کتاب‌های من, + toast: "", + message: "", + }, + { + name: "بلاگ", + link: "/blogs", + icon: بلاگ, + toast: "", + message: "", + }, + { + name: "پشتیبانی", + link: "/support", + icon: پشتیبانی, + toast: "", + message: "", + // onClick: this.props.logout, + }, + ]; + const links2 = [ + { + name: "صفحه اصلی", + link: "/", + icon: صفحه اصلی, + toast: "", + message: "", + }, + { + name : 'یوتیوب', + link: "/video-tube", + icon: صفحه اصلی, + toast: "", + message: "", + }, + { + name : 'خریداشتراک', + link: "/subscribe", + icon: صفحه اصلی, + toast: "", + message: "", + }, + { + name : 'سوالات متداول', + link: "/faq", + icon: صفحه اصلی, + toast: "", + message: "", + }, + { + name : 'صفحه محصول', + link: "/courses/1", + icon: صفحه اصلی, + toast: "", + message: "", + }, + // { + // name: "واقعیت افزوده", + // link: "/ar", + // icon: واقعیت افزوده, + // toast: "", + // message: "", + // }, + // { + // name: "بارکد خوان", + // link: "/qr-scan", + // icon: بارکد خوان, + // toast: "", + // message: "", + // }, + // { + // name: "کتاب‌های من", + // link: "/mybooks", + // icon: کتاب‌های من, + // toast: "", + // message: "", + // }, + // { + // name: "سبد خرید", + // link: "/cart", + // icon: فروشگاه, + // toast: "", + // message: "", + // }, + // { + // name: "بلاگ", + // link: "/blogs", + // icon: بلاگ, + // toast: "", + // message: "", + // }, + // { + // name: "دانوینی‌ها", + // link: "/", + // icon: دانوینی‌ها, + // toast: "به زودی این بخش فعال می شود", + // message: "به زودی", + // }, + { + name: "تماس با ما", + link: "/contact", + icon: پشتیبانی, + toast: "", + message: "", + // onClick: this.props.logout, + }, + // { + // name: "ویرایش مشخصات", + // link: "/profile", + // icon: ویرایش مشخصات, + // toast: "", + // // message: "4 پیام", + // }, + // { + // name: "بروز رسانی", + // link: "/", + // icon: خروج, + // toast: "", + // message: "", + // onClick: () => { + // window.location.reload(); + // }, + // }, + { + name: "خروج", + link: "/auth", + icon: خروج, + toast: "", + message: "", + onClick: () => { + logout({}); + }, + }, + ]; + const statusx = proxy.status(); + let score = 2; + + return ( +
+ {statusx ? ( +
+ <> + + +
+

{status.firstName + " " + status.lastName}

+
+ + + {dropdown ? ( +
setDropdown(false)} + > + {score ? {score} امتیاز : null} + +
+ ) : ( +
setDropdown(true)} + > + {score ? {score} امتیاز : null}{" "} + +
+ )} +
+ ) : null} + {dropdown ? ( +
+ {/* {this.props.users.map((item, i) => ( + + ))} */} + +
+ +
اضافه کردن کاربر
+ {/* {item.message &&
{item.message}
} */} +
+ +
+ ) : null} +
+ {(true ? links2 : links).map((item: any, key: any) => ( + (item.link === "" ? toast.error(item.toast) : null)) + } + > +
+ {item.icon} +
{item.name}
+ {item.message &&
{item.message}
} +
+ + ))} + + {/*
+ نسخه نرم‌افزار 3.1 +
*/} +
+
+ ); +}; + +export default connect((state: any) => ({ status: state.user.status }), { + logout: user.logout, +})(NavbarDrawer); + +const User = (props: any) => { + return ( +
+ +
+

+ {props.data.firstName + " " + props.data.lastName} +

+
+ {props.data.title} +
+
+ {props.data.status === 1 ? ( +
+ +
+ ) : null} +
+ ); +}; diff --git a/src/redux/actions-type/public.tsx b/src/redux/actions-type/public.tsx index 6aa93ad..5715dec 100644 --- a/src/redux/actions-type/public.tsx +++ b/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; diff --git a/src/redux/actions/public.tsx b/src/redux/actions/public.tsx index c38ec98..8295be0 100644 --- a/src/redux/actions/public.tsx +++ b/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 }), }; diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx index debc825..a6057bf 100644 --- a/src/redux/reducers/public.tsx +++ b/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": diff --git a/src/views/Faq/index.tsx b/src/views/Faq/index.tsx index c298190..6c1a74a 100644 --- a/src/views/Faq/index.tsx +++ b/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) {