Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance NavBar Functionality and Header Visibility #109

Merged
merged 2 commits into from
Oct 7, 2024
Merged

Enhance NavBar Functionality and Header Visibility #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48faad6
Updated UI and fixed Bugs
MohdAftab011 Oct 6, 2024
91d8ddf
Merge branch 'main' of https://github.com/MohdAftab011/eventmint
MohdAftab011 Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18,209 changes: 18,209 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Template from "./components/Auth/Template";


function App() {

return (
<div>
<Router>
Expand All @@ -27,6 +28,7 @@ function App() {
</Router>
</div>
);

}

export default App;
4 changes: 3 additions & 1 deletion src/assets/styles/Header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
20 changes: 11 additions & 9 deletions src/assets/styles/ImageSlider.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}


126 changes: 80 additions & 46 deletions src/assets/styles/NavBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 */
}

8 changes: 5 additions & 3 deletions src/components/Auth/LoginForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"}
Expand All @@ -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}
Expand All @@ -78,6 +79,7 @@ function LoginForm() {
/>
)}
</span>
</div>
</label>
<button
type="submit"
Expand Down
121 changes: 63 additions & 58 deletions src/components/Auth/SignupForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -194,3 +198,4 @@ function SignupForm() {
}

export default SignupForm;

Loading