Nav Bar Made

src/App.js

@@ -617,7 +617,7 @@ function App() {
       }
     }
   }
-  const [LOGIN,setLOGIN]=useState(false);
+  const [LOGIN,setLOGIN]=useState(true);
   const activeLogin=()=>{
     setLOGIN(true);
   }

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")) {
+// if (location.includes("accounting")) {
-  initai_navId = 2;
+//   initai_navId = 2;
-} else if (location.includes("messages")) {
+// } else if (location.includes("messages")) {
-  initai_navId = 5;
+//   initai_navId = 5;
-}
+// }
 const Nav = ({ logOut }) => {
   const [navId, setNavId] = useState(initai_navId);
 
   const chaneNav = (id) => {
     setNavId(id);
-    let top = ((1 + id) / 8) * 100;
+    let top = 100/6 + (id-1) * 100/6 * 3/4;
-    // console.log(top);
+    console.log(top)
     document.querySelector(".back-item-img").style.top = `${top}%`;
   };
   return (
-    <div className="nav h-full w-[6.5%] absolute top-0 right-0 z-20 overflow-hidden bg-white border-l border-l-color1">
+    <div className="nav h-full w-[6.5%] absolute top-0 right-0 z-20 overflow-hidden bg-grayEC border-l border-l-color1">
-      <img src={logo} alt="logo" className="logo w-full h-1/4" />
+      <img src={logo} alt="logo" className="logo w-full h-1/6" />
       <div
-        className="back-item-img w-full h-[12.5%] bg-color2 absolute right-0 top-1/4 z-20 transition-all duration-300"
+        className="back-item-img w-full h-[12.5%] bg-red52 absolute right-0  z-20 transition-all duration-300"
         style={
           initai_navId === 2
-            ? { top: `${(3 / 8) * 100}%` }
+            ? { top: `${(3 / 12) * 100}%` }
             : initai_navId === 5
-            ? { top: `${(6 / 8) * 100}%` }
+              ? { top: `${(6 / 12) * 100}%` }
-            : null
+              : 
+          null
         }
       ></div>
 
       {/* ------------ */}
-      <div className="nav-menu-container w-full h-3/4 flex-col items-center absolute z-30 top-1/4 right-0">
+      <div className="nav-menu-container w-full h-3/4 flex-col items-center absolute z-30  right-0">
         <Link
           to="/dashboard"
           className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
@@ -181,11 +182,38 @@ const Nav = ({ logOut }) => {
           </div>
         </Link>
         {/* ---------- */}
+
+
+
+        <Link
+          to="/settings"
+          className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
+          onClick={() => chaneNav(3)}
+        >
+          <svg id="vuesax_linear_setting-2" data-name="vuesax/linear/setting-2" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
+            <g id="setting-2">
+              <path id="Vector" d="M11.523,5.761A5.761,5.761,0,1,1,5.761,0,5.761,5.761,0,0,1,11.523,5.761Z" transform="translate(17.284 17.284)" fill="none" stroke={navId === 3 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-2" data-name="Vector" d="M0,19.817v-3.38a3.66,3.66,0,0,1,3.649-3.649c3.476,0,4.9-2.458,3.15-5.473A3.647,3.647,0,0,1,8.143,2.341L11.465.44a3.205,3.205,0,0,1,4.379,1.152l.211.365c1.728,3.015,4.571,3.015,6.318,0l.211-.365A3.205,3.205,0,0,1,26.963.44l3.322,1.9A3.647,3.647,0,0,1,31.63,7.315c-1.748,3.015-.326,5.473,3.15,5.473a3.66,3.66,0,0,1,3.649,3.649v3.38a3.66,3.66,0,0,1-3.649,3.649c-3.476,0-4.9,2.458-3.15,5.473a3.643,3.643,0,0,1-1.344,4.974l-3.322,1.9a3.205,3.205,0,0,1-4.379-1.152l-.211-.365c-1.728-3.015-4.571-3.015-6.318,0l-.211.365a3.205,3.205,0,0,1-4.379,1.152l-3.322-1.9A3.647,3.647,0,0,1,6.8,28.939c1.748-3.015.326-5.473-3.15-5.473A3.66,3.66,0,0,1,0,19.817Z" transform="translate(3.841 4.919)" fill="none" stroke={navId === 3 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-3" data-name="Vector" d="M0,0H46.091V46.091H0Z" fill="none" opacity="0" />
+            </g>
+          </svg>
+
+          <div
+            className="nav-menu-container-item-title text-sm"
+            style={3 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
+          >
+            خدمات من
+          </div>
+        </Link>
+
+
+
+
         {/* ---------- */}
         <Link
           to="/messages"
           className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
-          onClick={() => chaneNav(3)}
+          onClick={() => chaneNav(4)}
         >
           <svg
             id="vuesax_linear_sms"
@@ -202,7 +230,7 @@ const Nav = ({ logOut }) => {
                 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 }) => {
           </svg>
           <div
             className="nav-menu-container-item-title text-sm"
-            style={3 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
+            style={4 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
           >
-            پیام‌ها
+            پشتیبانی
           </div>
         </Link>
         {/* ---------- */}
+
+        <Link
+          to="/contacts"
+          className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"
+          onClick={() => chaneNav(5)}
+        >
+          <svg id="vuesax_linear_calculator" data-name="vuesax/linear/calculator" xmlns="http://www.w3.org/2000/svg" width="46.091" height="46.091" viewBox="0 0 46.091 46.091">
+            <g id="calculator" transform="translate(0)">
+              <path id="Vector" d="M13.443,38.409h7.682c9.6,0,13.443-3.841,13.443-13.443V13.443C34.568,3.841,30.727,0,21.125,0H13.443C3.841,0,0,3.841,0,13.443V24.966C0,34.568,3.841,38.409,13.443,38.409Z" transform="translate(5.761 3.841)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-2" data-name="Vector" d="M17.284,2.881V4.8A2.889,2.889,0,0,1,14.4,7.682H2.881A2.889,2.889,0,0,1,0,4.8V2.881A2.889,2.889,0,0,1,2.881,0H14.4A2.877,2.877,0,0,1,17.284,2.881Z" transform="translate(14.403 11.676)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-3" data-name="Vector" d="M.636.5H.658" transform="translate(14.989 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-4" data-name="Vector" d="M.636.5H.658" transform="translate(22.4 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-5" data-name="Vector" d="M.636.5H.658" transform="translate(29.812 26.387)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-6" data-name="Vector" d="M.636.5H.658" transform="translate(14.989 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-7" data-name="Vector" d="M.636.5H.658" transform="translate(22.4 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-8" data-name="Vector" d="M.636.5H.658" transform="translate(29.812 33.108)" fill="none" stroke={navId === 5 ? "#fff" : "#a5a8ab"} stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+              <path id="Vector-9" data-name="Vector" d="M0,0H46.091V46.091H0Z" transform="translate(46.091 46.091) rotate(180)" fill="none" opacity="0" />
+            </g>
+          </svg>
+
+          <div
+            className="nav-menu-container-item-title text-sm"
+            style={5 === navId ? { color: "#fff" } : { color: "#A5A8AB" }}
+          >
+            اطلاعات تماس
+          </div>
+        </Link>
+
+
+
         <Link
           to="/"
           className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"

src/components/verificationInput/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import './VerificationInput.css';
 
 export default class VerificationInput extends React.Component {
     
@@ -10,17 +9,11 @@ export default class VerificationInput extends React.Component {
 const handleChange = e => {
   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();
       }

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 + 1
-                setIndex((prevIndex) =>
+                  //  prevIndex === slideContents.length - 1 ? 0 : 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 }) => {
                                 <div style={{ direction: 'ltr' }} className="w-full mt-6">
                                     <VerificationInput />
                                 </div>
+                                <Link
+                                    to="/dashboard"
+                                    className="Login-box-form-btn w-full h-12 rounded-lg bg-red52 text-white flex items-center justify-center mt-4"
+                                    onClick={() => {
+                                        activeLogin()
 
+                                    }}
+                                >
+                                    تایید
+                                </Link>
                             </>
                         }
 
@@ -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) => (
                                 <div
                                     className="slide"
                                     key={`sildeNo${index}`}
@@ -207,9 +262,9 @@ const LoginSignUp = ({ activeLogin }) => {
                             {slideContents.map((_, idx) => (
                                 <div
                                     key={idx}
-                                    className={`slideshowDot${index === idx ? " active" : ""}`}
+                                    className={`slideshowDot${index === idx+1 ? " active" : ""}`}
                                     onClick={() => {
-                                        setIndex(idx);
+                                        setIndex(idx+1);
                                     }}
                                 ></div>
                             ))}

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",