From 600b04b4f9afb99f0db531cde87240dffb1028b8 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Sat, 5 Feb 2022 13:22:05 +0330 Subject: [PATCH] Nav Bar Made --- src/App.js | 2 +- src/components/nav/Nav.js | 96 ++++++++++++++++++----- src/components/verificationInput/index.js | 7 -- src/view/LoginSignUp/index.js | 73 ++++++++++++++--- tailwind.config.js | 2 +- 5 files changed, 143 insertions(+), 37 deletions(-) diff --git a/src/App.js b/src/App.js index 7ab832c..891eebb 100644 --- a/src/App.js +++ b/src/App.js @@ -617,7 +617,7 @@ function App() { } } } - const [LOGIN,setLOGIN]=useState(false); + const [LOGIN,setLOGIN]=useState(true); const activeLogin=()=>{ setLOGIN(true); } diff --git a/src/components/nav/Nav.js b/src/components/nav/Nav.js index 560dbde..84f962f 100644 --- a/src/components/nav/Nav.js +++ b/src/components/nav/Nav.js @@ -13,36 +13,37 @@ 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; -} +// if (location.includes("accounting")) { +// initai_navId = 2; +// } else if (location.includes("messages")) { +// initai_navId = 5; +// } const Nav = ({ logOut }) => { const [navId, setNavId] = useState(initai_navId); const chaneNav = (id) => { setNavId(id); - let top = ((1 + id) / 8) * 100; - // console.log(top); + let top = 100/6 + (id-1) * 100/6 * 3/4; + console.log(top) document.querySelector(".back-item-img").style.top = `${top}%`; }; return ( -
- logo +
+ logo
{/* ------------ */} -
+
{
{/* ---------- */} + + + + chaneNav(3)} + > + + + + + + + + +
+ خدمات من +
+ + + + + {/* ---------- */} chaneNav(3)} + onClick={() => chaneNav(4)} > { d="M28.807,32.648H9.6c-5.761,0-9.6-2.881-9.6-9.6V9.6C0,2.881,3.841,0,9.6,0h19.2c5.761,0,9.6,2.881,9.6,9.6V23.046C38.409,29.767,34.568,32.648,28.807,32.648Z" transform="translate(3.841 6.722)" fill="none" - stroke={navId === 3 ? "#fff" : "#a5a8ab"} + stroke={navId === 4 ? "#fff" : "#a5a8ab"} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" @@ -213,7 +241,7 @@ const Nav = ({ logOut }) => { d="M19.2,0,13.194,4.8a6.08,6.08,0,0,1-7.2,0L0,0" transform="translate(13.443 17.284)" fill="none" - stroke={navId === 3 ? "#fff" : "#a5a8ab"} + stroke={navId === 4 ? "#fff" : "#a5a8ab"} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" @@ -229,12 +257,42 @@ const Nav = ({ logOut }) => {
- پیام‌ها + پشتیبانی
{/* ---------- */} + + chaneNav(5)} + > + + + + + + + + + + + + + + +
+ اطلاعات تماس +
+ + + + { const { maxLength, value, name } = e.target; const [fieldName, fieldIndex] = name.split("-"); - - // Check if they hit the max character length if (value.length >= maxLength) { - // Check if it's not the last input field if (parseInt(fieldIndex, 10) < 4) { - // Get the next input field const nextSibling = document.querySelector( `input[name=ssn-${parseInt(fieldIndex, 10) + 1}]` ); - - // If found, focus the next field if (nextSibling !== null) { nextSibling.focus(); } diff --git a/src/view/LoginSignUp/index.js b/src/view/LoginSignUp/index.js index d6d3f7c..adf8133 100644 --- a/src/view/LoginSignUp/index.js +++ b/src/view/LoginSignUp/index.js @@ -11,7 +11,7 @@ import VerificationInput from "../../components/verificationInput"; const LoginSignUp = ({ activeLogin }) => { const [steps, setSteps] = useState(0); - const [index, setIndex] = useState(0); + const [index, setIndex] = useState(1); const timeoutRef = useRef(null); @@ -47,10 +47,13 @@ const LoginSignUp = ({ activeLogin }) => { useEffect(() => { resetTimeout(); timeoutRef.current = setTimeout( - () => - setIndex((prevIndex) => - prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1 - ), + () =>{setIndex((prevIndex) =>prevIndex + 1 + // prevIndex === slideContents.length - 1 ? 0 : prevIndex + 1 + ) + if(index === slideContents.length) + setTimeout(setIndex(1),1000) + }, + delay ); @@ -72,7 +75,48 @@ const LoginSignUp = ({ activeLogin }) => { description: 'لورم ایپسوم نمیخواستم استفاده کنم برای همین این متنای عجیب رو مینویسم ببینم چجوری میشه تهش بالاخره اونا هم قراره یه متن عجیب بنویسن ', }, { - id: 1, + id: 2, + image: thirdPic, + title: 'یک اسلاید عجیب غریب دیگر در راه هست', + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + }, + { + id: 2, + image: thirdPic, + title: 'یک اسلاید عجیب غریب دیگر در راه هست', + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + },{ + id: 2, + image: thirdPic, + title: 'یک اسلاید عجیب غریب دیگر در راه هست', + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + },{ + id: 2, + image: thirdPic, + title: 'یک اسلاید عجیب غریب دیگر در راه هست', + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + },{ + id: 2, + image: thirdPic, + title: 'یک اسلاید عجیب غریب دیگر در راه هست', + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + },{ + id: 2, + image: thirdPic, + title: 'یک اسلاید عجیب غریب دیگر در راه هست', + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + },{ + id: 2, + image: thirdPic, + title: 'یک اسلاید عجیب غریب دیگر در راه هست', + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + },{ + id: 2, + image: thirdPic, + title: 'یک اسلاید عجیب غریب دیگر در راه هست', + description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', + },{ + id: 2, image: thirdPic, title: 'یک اسلاید عجیب غریب دیگر در راه هست', description: 'معلمی که دانش آموزانش رو شب ها شکار می کند و این متن شاید باعث تعجب شما شده باشد که آیا طراح دیوانه شده است یا خیر ؟ ', @@ -163,7 +207,16 @@ const LoginSignUp = ({ activeLogin }) => {
+ { + activeLogin() + }} + > + تایید + } @@ -188,7 +241,9 @@ const LoginSignUp = ({ activeLogin }) => { className="slideshowSlider" style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }} > - {slideContents.map((item, index) => ( + {[slideContents[slideContents.length-1], + ...slideContents,slideContents[0] + ].map((item, index) => (
{ {slideContents.map((_, idx) => (
{ - setIndex(idx); + setIndex(idx+1); }} >
))} diff --git a/tailwind.config.js b/tailwind.config.js index 526a16a..43acf9e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,7 +4,7 @@ module.exports = { extend: { colors: { color1: "#E3F0FF", - color2: "#267DE9", + color2: "#df1452", color2_5: "rgba(38,125,233,0.05)", color3: "#B8B8B8", color4: "#17A742",