Merge pull request #109 from MohdAftab011/main

Enhance NavBar Functionality and Header Visibility

src/App.js

@@ -8,6 +8,7 @@ import Template from "./components/Auth/Template";
 
 
 function App() {
+
 	return (
 		<div>
 			<Router>
@@ -27,6 +28,7 @@ function App() {
 			</Router>
 		</div>
 	);
+
 }
 
 export default App;

src/assets/styles/Header.css

@@ -2,14 +2,16 @@
 .header {
     display: flex;
     justify-content: space-between;
-    position: fixed ;
     z-index: 1000;
     width: 100%;
     align-items: center;
     padding: 10px;
     color: #000000;
     background-color: #fff;
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); 
+    position: relative; /* Ensure relative positioning */
+    z-index: 10; /* Set a lower z-index for the header */
+
   }
 
   .logo {

src/assets/styles/ImageSlider.css

@@ -1,11 +1,13 @@
+
 .slider-container {
-    margin: 20px auto;
-    width: 80%;
-  }
-
-  .slider-container img {
-    width: 100%;
-    height: auto;
-    border-radius: 10px;
-  }
+  margin: 20px auto;
+  width: 80%;
+}
+
+.slider-container img {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+}
+
 

src/assets/styles/NavBar.css

@@ -1,47 +1,81 @@
-/* NavBar.css */
+
 .navbar {
-    background-color: #e8e8e8;
-    padding-top: 81px;
-    padding-bottom:10px;
-    display: flex;
-    width: 100%;
-    /* flex-direction: column; */
-    align-items: center;
-    overflow-x: auto; /* Enable horizontal scrolling if needed */
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
-  }
-
-  .main-nav ul{
-    list-style: none;
-    display: flex;
-    justify-content: left;
-    padding: 0;
-    margin: 10px 0;
-    width: 100%;
-    /* min-width: 1200px; */
-
-  }
-
-  .additional-links ul {
-    list-style: none;
-    display: flex;
-    /* justify-content: right; */
-    padding: 0;
-    margin: 10px 0;
-    /* width: 100%; */
-    /* max-width: 1200px; */
-
-  }
-
-  .main-nav ul li, .additional-links ul li {
-    margin: 0 10px;
-    cursor: pointer;
-    font-size: 16px;
-    color: #333;
-    transition: color 0.3s;
-  }
-
-  .main-nav ul li:hover, .additional-links ul li:hover {
-    color: #007bff;
-  }
-
+  background-color: #000; /* Set the background to black */
+  padding: 15px 20px; /* Add some padding for spacing */
+  display: flex; /* Use flexbox for layout */
+  align-items: center; /* Center items vertically */
+  justify-content: space-between; /* Space out items evenly */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Add subtle shadow for depth */
+  position: relative;
+}
+
+/* Dropdown styles */
+.dropdown {
+  position: relative;
+  display: inline-block;
+  margin: 0 15px;
+}
+
+/* Dropdown button */
+.dropbtn {
+  background-color: transparent; /* Make background transparent */
+  color: #fff; /* Set text color to white */
+  padding: 10px 16px; /* Add padding */
+  font-size: 16px; /* Set font size */
+  border: none; /* Remove border */
+  cursor: pointer; /* Change cursor on hover */
+  transition: color 0.3s; /* Smooth transition for color */
+}
+
+/* Button hover effect */
+.dropbtn:hover {
+  color: #007bff; /* Change color on hover */
+}
+
+/* Dropdown content */
+.dropdown-content {
+  display: none; /* Hide dropdown by default */
+  position: absolute; /* Position it below the button */
+  background-color: #333; /* Dark background for dropdown */
+  min-width: 160px; /* Minimum width for dropdown */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Shadow for dropdown */
+  z-index: 1; /* Stack above other content */
+}
+
+/* Show dropdown on hover */
+.dropdown:hover .dropdown-content {
+  display: block; /* Show dropdown on hover */
+}
+
+.dropdown-content a {
+  color: #fff; /* Set link color to white */
+  padding: 12px 16px; /* Add padding */
+  text-decoration: none; /* Remove underline */
+  display: block; /* Make links block elements */
+  transition: background-color 0.3s; /* Smooth transition */
+}
+
+/* Link hover effect */
+.dropdown-content a:hover {
+  background-color: #444; /* Change background on hover */
+}
+
+/* Styling for single link */
+.single-link {
+  margin-left: 20px; /* Space between dropdown and single link */
+}
+
+.single-link a {
+  color: #fff; /* Set link color to white */
+  font-size: 16px; /* Set font size */
+  text-decoration: none; /* Remove underline */
+  padding: 10px 16px; /* Add padding */
+  cursor: pointer; /* Change cursor on hover */
+  transition: color 0.3s; /* Smooth transition */
+}
+
+/* Single link hover effect */
+.single-link a:hover {
+  color: #007bff; /* Change color on hover */
+}
+

src/components/Auth/LoginForm.jsx

@@ -50,10 +50,11 @@ function LoginForm() {
 						className="form-style  w-full font-semibold p-2 rounded-md bg-white border-[1px] border-black text-black"
 					/>
 				</label>
-				<label className="relative">
-					<p className="mb-1 text-[1rem] leading-[1.375rem] font-semibold text-richblack-5">
+				<label className="relative w-full">
+					<p className="mb-1 text-[0.95rem] leading-[1.375rem] font-semibold text-richblack-5">
 						Password
 					</p>
+					<div className="flex items-center">
 					<input
 						required
 						type={showPassword ? "text" : "password"}
@@ -65,7 +66,7 @@ function LoginForm() {
 					/>
 					<span
 						onClick={() => setShowPassword((prev) => !prev)}
-						className="absolute right-3 top-[26px] z-[10] cursor-pointer">
+						className="absolute right-3 top-[45 px] z-[10] cursor-pointer">
 						{showPassword ? (
 							<AiOutlineEyeInvisible
 								fontSize={24}
@@ -78,6 +79,7 @@ function LoginForm() {
 							/>
 						)}
 					</span>
+					</div>
 				</label>
 				<button
 					type="submit"

src/components/Auth/SignupForm.jsx

@@ -63,9 +63,9 @@ function SignupForm() {
 				onSubmit={handleOnSubmit}
 				className="flex w-full font-semibold flex-col gap-y-6 text-black border-[2px] border-black p-6 rounded-md">
 				<div className="flex gap-x-4">
-					<label>
+					<label className="w-full">
 						<p className="mb-1 text-[0.95rem] leading-[1.375rem]">
-							First Name 
+							First Name
 						</p>
 						<input
 							required
@@ -77,9 +77,9 @@ function SignupForm() {
 							className="form-style w-full  p-2 border-[1px] bg-white border-black rounded-md  text-black"
 						/>
 					</label>
-					<label>
-						<p className="mb-1 text-[0.95rem] leading-[1.375rem] text-richblack-5">
-							Last Name 
+					<label className="w-full">
+						<p className="mb-1 text-[0.95rem] leading-[1.375rem]">
+							Last Name
 						</p>
 						<input
 							required
@@ -94,7 +94,7 @@ function SignupForm() {
 				</div>
 				<label className="w-full">
 					<p className="mb-1 text-[0.95rem] leading-[1.375rem] ">
-						Email Address 
+						Email Address
 					</p>
 					<input
 						required
@@ -103,67 +103,71 @@ function SignupForm() {
 						value={email}
 						onChange={handleOnChange}
 						placeholder="Enter email address"
-						className="form-style w-[96%]  p-2 border-[1px] bg-white border-black rounded-md  text-black"
+						className="form-style w-full p-2 border-[1px] bg-white border-black rounded-md  text-black"
 					/>
 				</label>
 				<div className="flex gap-x-4">
-					<label className="relative">
+					<label className="relative w-full">
 						<p className="mb-1 text-[0.95rem] leading-[1.375rem] text-richblack-5">
 							Create Password
 						</p>
-						<input
-							required
-							type={showPassword ? "text" : "password"}
-							name="password"
-							value={password}
-							onChange={handleOnChange}
-							placeholder="Enter Password"
-							className="form-style w-full !pr-10  p-2 border-[1px] bg-white border-black rounded-md  text-black"
-						/>
-						<span
-							onClick={() => setShowPassword((prev) => !prev)}
-							className="absolute right-3 top-[26px] z-[10] cursor-pointer">
-							{showPassword ? (
-								<AiOutlineEyeInvisible
-									fontSize={24}
-									fill="#000000"
-								/>
-							) : (
-								<AiOutlineEye
-									fontSize={24}
-									fill="#000000"
-								/>
-							)}
-						</span>
+						<div className="flex items-center">
+							<input
+								required
+								type={showPassword ? "text" : "password"}
+								name="password"
+								value={password}
+								onChange={handleOnChange}
+								placeholder="Enter Password"
+								className="form-style w-full !pr-10 p-2 border-[1px] bg-white border-black rounded-md text-black"
+							/>
+							<span
+								onClick={() => setShowPassword((prev) => !prev)}
+								className="absolute right-3 top-[35px] z-[10] cursor-pointer">
+								{showPassword ? (
+									<AiOutlineEyeInvisible
+										fontSize={24}
+										fill="#000000"
+									/>
+								) : (
+									<AiOutlineEye
+										fontSize={24}
+										fill="#000000"
+									/>
+								)}
+							</span>
+						</div>
 					</label>
-					<label className="relative">
+					<label className="relative w-full">
 						<p className="mb-1 text-[0.95rem] leading-[1.375rem] text-richblack-5">
-							Confirm Password 
+							Confirm Password
 						</p>
-						<input
-							required
-							type={showConfirmPassword ? "text" : "password"}
-							name="confirmPassword"
-							value={confirmPassword}
-							onChange={handleOnChange}
-							placeholder="Confirm Password"
-							className="form-style w-full !pr-10 border-black  p-2 border-[1px] bg-white rounded-md  text-black"
-						/>
-						<span
-							onClick={() => setShowConfirmPassword((prev) => !prev)}
-							className="absolute right-3 top-[26px] z-[10] cursor-pointer text-black">
-							{showConfirmPassword ? (
-								<AiOutlineEyeInvisible
-									fontSize={24}
-									fill="#000000"
-								/>
-							) : (
-								<AiOutlineEye
-									fontSize={24}
-									fill="#000000"
-								/>
-							)}
-						</span>
+						<div className="flex items-center">
+							<input
+								required
+								type={showConfirmPassword ? "text" : "password"}
+								name="confirmPassword"
+								value={confirmPassword}
+								onChange={handleOnChange}
+								placeholder="Confirm Password"
+								className="form-style w-full !pr-10 border-black  p-2 border-[1px] bg-white rounded-md  text-black"
+							/>
+							<span
+								onClick={() => setShowConfirmPassword((prev) => !prev)}
+								className="absolute right-3 top-[35 px] z-[10] cursor-pointer text-black">
+								{showConfirmPassword ? (
+									<AiOutlineEyeInvisible
+										fontSize={24}
+										fill="#000000"
+									/>
+								) : (
+									<AiOutlineEye
+										fontSize={24}
+										fill="#000000"
+									/>
+								)}
+							</span>
+						</div>
 					</label>
 				</div>
 				<button
@@ -194,3 +198,4 @@ function SignupForm() {
 }
 
 export default SignupForm;
+