From d51b7e4fafb76a55a3363ecfeaee2d1f91e5f04b Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Mon, 14 Feb 2022 12:25:44 +0330 Subject: [PATCH] Mobile Nav Done --- src/App.css | 3 + src/assets/img/home-2.svg | 4 + src/assets/img/profile.svg | 4 + src/assets/img/shopping-cart.svg | 6 + src/assets/img/task-square.svg | 7 + src/components/nav/Nav.js | 716 ++++++++++++++++++------------- src/view/services/index.js | 4 +- 7 files changed, 434 insertions(+), 310 deletions(-) create mode 100644 src/assets/img/home-2.svg create mode 100644 src/assets/img/profile.svg create mode 100644 src/assets/img/shopping-cart.svg create mode 100644 src/assets/img/task-square.svg diff --git a/src/App.css b/src/App.css index be60c82..811d561 100644 --- a/src/App.css +++ b/src/App.css @@ -8,4 +8,7 @@ input::-webkit-inner-spin-button { } *{ transition: all 0.3s; +} +.rtl{ + direction: rtl; } \ No newline at end of file diff --git a/src/assets/img/home-2.svg b/src/assets/img/home-2.svg new file mode 100644 index 0000000..97f345e --- /dev/null +++ b/src/assets/img/home-2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/img/profile.svg b/src/assets/img/profile.svg new file mode 100644 index 0000000..d60c1f4 --- /dev/null +++ b/src/assets/img/profile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/img/shopping-cart.svg b/src/assets/img/shopping-cart.svg new file mode 100644 index 0000000..97f3321 --- /dev/null +++ b/src/assets/img/shopping-cart.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/img/task-square.svg b/src/assets/img/task-square.svg new file mode 100644 index 0000000..dacc1b9 --- /dev/null +++ b/src/assets/img/task-square.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/nav/Nav.js b/src/components/nav/Nav.js index 54b8e5f..49107e4 100644 --- a/src/components/nav/Nav.js +++ b/src/components/nav/Nav.js @@ -1,6 +1,6 @@ import "./Nav.scss"; import { useState } from "react"; - +import { connect } from "react-redux"; import { loadAnimation } from "lottie-web"; import { defineLordIconElement } from "lord-icon-element"; @@ -12,123 +12,243 @@ import { Link } from "react-router-dom"; // let oldNavItemId = 1; let location = window.location.pathname; -let initai_navId = 1; -// if (location.includes("accounting")) { -// initai_navId = 2; -// } else if (location.includes("messages")) { -// initai_navId = 5; -// } -const Nav = ({ logOut }) => { + +const Nav = ({ + logOut, + isMobile, + isLogin, +}) => { + let initai_navId = 1; + if(isMobile){ + if (location.includes("services")) { + initai_navId = 2; + } else if (location.includes("exams")) { + initai_navId = 3; + } + else if(location.includes('dashboard')){ + initai_navId = 4; + } +}else{ + if (location.includes("accounting")) { + initai_navId = 2; + } else if (location.includes("messages")) { + initai_navId = 5; + } +} + const mobileOptions = [ + { + title: 'صفحه اصلی', + icon: + + + + , + link: '/', + }, + { + title: 'فروشگاه', + icon: + + + + + , + link: '/services', + }, + { + title: 'آزمون ها', + icon: + + + + + + + , + link: '/exams', + }, + { + title: 'حساب کاربری', + icon: + + + + , + link: '/dashboard', + }, + ]; + const [navId, setNavId] = useState(initai_navId); + const chaneNav = (id) => { setNavId(id); - let top = 100/6 + (id-1) * 100/6 * 3/4; + let top = 100 / 6 + (id - 1) * 100 / 6 * 3 / 4; console.log(top) document.querySelector(".back-item-img").style.top = `${top}%`; }; - return ( -
-
- logo + if (isMobile) { + return ( +
+
+ { + mobileOptions.map( + (item, index) => ( + setNavId(index + 1)}> +
+ {item.icon} +
+

{item.title}

+ { navId == index + 1 && +
+ +
+ } + + ) + ) + } +
-
+ ) + } else { + return ( +
+
+ logo - {/* ------------ */} -
- chaneNav(1)} - > - +
+ + {/* ------------ */} +
+ chaneNav(1)} > - - - + + + + + + + + + +
+ منوی اصلی +
+ + {/* ---------- */} + chaneNav(2)} + > + + + + + - - - -
- منوی اصلی -
- - {/* ---------- */} - chaneNav(2)} - > - - - { strokeWidth="2" /> - - - - - -
- انتخاب خدمات -
- - {/* ---------- */} + +
+ انتخاب خدمات +
+ + {/* ---------- */} - chaneNav(3)} - > - - - - - - - - -
chaneNav(3)} > - خدمات من -
- + + + + + + + +
+ خدمات من +
+ - {/* ---------- */} - chaneNav(4)} - > - - - - - - - -
- پشتیبانی -
- - {/* ---------- */} - chaneNav(5)} - > - - - - - - - - - - - - - + {/* ---------- */} + chaneNav(4)} + > + + + + + + + +
+ پشتیبانی +
+ + {/* ---------- */} -
chaneNav(5)} > - اطلاعات تماس -
- + + + + + + + + + + + + + +
+ اطلاعات تماس +
+ - - - - - - - - - -
- خروج -
- + + + + + + + + +
+ خروج +
+ +
-
- ); + ); + } +}; + +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark, + isMobile: state.publicApi.isMobile, + headerOptions: state.publicApi.headerOptions, + isLogin: state.user.status, + cartProductsLength: state.userProduct.list?.filter( + (product) => product.condition < 2 + )?.length, +}); + +const mapDispatchToProps = { }; -export default Nav; +export default connect(mapStateToProps, mapDispatchToProps)(Nav); { /*
-
+ {!isMobile &&
-
+
}
); };