Stepper Fixed + Nav Fixed (position)

src/components/Stepper/index.js

@@ -0,0 +1,83 @@
+import React, {useState} from "react";
+
+function Stepper({
+  direction,
+  activeColor,
+  deactiveColor,
+  count,
+  currentStep,
+}) {
+  const steps = [
+    {
+      title: 'اطلاعات هویتی'
+    },
+    {
+      title: 'مشخصات والدین'
+    },
+    {
+      title: 'قوانین و مقررات'
+    },
+    {
+      title: 'تایید اطلاعات'
+    },
+  ]
+  return (
+    <div
+      className={`flex items-center ${
+        direction === "horizontal" ? "flex-row" : "flex-col"
+      }`}
+    >
+      {steps.map((item, index) => (
+         <div
+         className={`flex items-center w-full justify-start relative ${
+           direction === "horizontal" ? "flex-row" : "flex-col"
+         }`}
+       >
+         <div className="flex items-center justify-start w-full">
+         <div
+           className="w-8 h-8 text-white text-sm rounded-full flex justify-center items-center"
+           style={{
+             backgroundColor:
+               currentStep === Number(index) ? activeColor : deactiveColor,
+           }}
+         >
+           
+         </div>
+        <p className={`mr-4 font-bold ${currentStep === Number(index) ? 'text-red26' : 'text-gray-400'}`}>{item.title}</p>
+         </div>
+         {count !== (Number(index) + 1) && (
+           <span
+             className={`transform my-1 rounded-xl  ${
+               direction === "horizontal"
+                 ? "w-8 h-1"
+                 : "h-8 w-1"
+             }`}
+             style={{
+               opacity: '0.5',
+               background: currentStep === Number(index) ? activeColor : deactiveColor,
+              //  borderTop: direction === "horizontal" ? `3px solid ${
+              //    currentStep === Number(index) ? activeColor : deactiveColor
+              //  }` : '',
+              //  borderRight: direction === "vertical" ? `3px solid ${
+              //    currentStep === Number(index) ? activeColor : deactiveColor
+              //  }` : '',
+               transform : `${direction === "horizontal" ? 'translateY(1px)' : 'translateX(64px)'}`
+             }}
+           ></span>
+         )}
+       </div>
+      ))}
+    </div>
+  );
+}
+
+
+export default Stepper;
+
+Stepper.defaultProps = {
+  direction: "vertical",
+  activeColor: "#df1452",
+  deactiveColor: "#DBDBDB",
+  
+ 
+};

src/components/nav/Nav.js

@@ -28,7 +28,7 @@ const Nav = ({ logOut }) => {
     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-grayEC border-l border-l-color1">
+    <div className="nav h-full w-[6.5%] fixed top-0 right-0 z-20 overflow-hidden bg-grayEC border-l border-l-color1">
       <div className="h-1/6 flex items-center">
       <img src={logo} alt="logo" className="logo w-full" />
 

src/view/register/index.js

@@ -10,6 +10,7 @@ import VerificationInput from "../../components/verificationInput";
 import Input from "../../components/input";
 import FileInput from "../../components/fileInput";
 import Button from "../../components/Button";
+import Stepper from "../../components/Stepper";
 
 
 const Register = ({ activeLogin }) => {
@@ -131,7 +132,7 @@ const Register = ({ activeLogin }) => {
                         </p>
 
                         <div className="flex flex-col mt-6">
-                            {
+                            {/* {
                                 stepCont.map((item) => (
 
                                     <div key={`step__${item.step}`} className="flex my-2 items-center ">
@@ -152,7 +153,9 @@ const Register = ({ activeLogin }) => {
 
                                 )
                                 )
-                            }
+
+                            } */}
+                            <Stepper count={4} currentStep={steps}/>
                         </div>