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

Fixed issues in Header component #496

Closed
wants to merge 1 commit into from
Closed

Fixed issues in Header component #496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 33 additions & 20 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@


@import "slick-carousel/slick/slick.css";
@import "slick-carousel/slick/slick-theme.css";

*{
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.App {
text-align: center;
margin: 0px;
padding: 0px;
margin: 0;
padding: 0;
}

.App-logo {
Expand All @@ -24,7 +24,6 @@
}
}


.App-header {
background-color: #282c34;
min-height: 100vh;
Expand Down Expand Up @@ -52,8 +51,6 @@
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

Expand All @@ -63,7 +60,6 @@ header {
color: white;
padding: 1rem 0;
text-align: center;

}

header h1 {
Expand All @@ -73,11 +69,9 @@ header h1 {

header nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
margin-top: 1rem;

}

header nav ul li {
Expand All @@ -86,49 +80,68 @@ header nav ul li {
padding: 10px;
border-radius: 10px;
background-color: #282c34;
transition: background-color 0.3s ease;
}

header nav ul li:hover {
background-color: #444;
}

/* Grid List Styles */
.movie-list, .sport-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
justify-items: center;
align-items: center;
padding: 20px;
}

.movie, .sport {
border-radius: 5px;
text-align: center;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 15px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.movie:hover, .sport:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.movie h2, .sport h2 {
font-size: 15px;
font-size: 1rem;
margin: 0.5rem 0;
color: white;
color: #333;
}

.movie p, .sport p {
font-size: 14px;
color: #c1bdbd;
font-size: 0.875rem;
color: #666;
}

/* Button Styles */
.movie button, .sport button {
background-color: #ff0000;
border: none;
color: white;
cursor: pointer;
font-size: 13px;
font-size: 0.875rem;
padding: 0.5rem 1rem;
border-radius: 3px;
transition: background-color 0.3s ease;
}

.movie button:hover {
background-color: #ff0000;
.movie button:hover, .sport button:hover {
background-color: #cc0000;
}

.slider-container{
/* Slider Styles */
.slider-container {
width: 100%;
overflow: hidden;
margin: 20px 0;
}

34 changes: 15 additions & 19 deletions src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,42 +24,40 @@ function Header({ onSearch }) {

const handleSearch = (e) => {
setSearchTerm(e.target.value);
onSearch(e.target.value);
if (onSearch) {
onSearch(e.target.value);
}
};

const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
console.log(isMenuOpen);
};

return (
<header
className="header container-fluid d-flex align-items-center justify-content-between p-3"
>
<div className="logo " style={{height:"70px"}}>
<header className="header container-fluid d-flex align-items-center justify-content-between p-3">
<div className="logo" style={{ height: "70px" }}>
<a href="https://eventmint.vercel.app/">
<img src={Logo} alt="Logo" className="aspect-[3/2] object-contain"/>
<img src={Logo} alt="Logo" className="aspect-[3/2] object-contain" />
</a>
</div>

<div className="search-location-container d-flex justify-center align-items-center w-100">
<div
className="search-bar input-group w-75"
style={{ marginLeft: "5px", marginRight:"-17px" }}
>
<div className="search-bar input-group w-75" style={{ marginLeft: "5px", marginRight: "-17px" }}>
<label htmlFor="search-input" className="visually-hidden">Search</label>
<input
id="search-input"
type="text"
className="form-control"
placeholder="Search for Movies, Events, Plays, Sports and Activities"
value={searchTerm}
onChange={handleSearch} // Update the search term on input change
onChange={handleSearch}
/>
<span className="input-group-text">
<i className="bi bi-search"></i>
</span>
</div>
<select
className="location form-select w-auto ml-10"
>

<select className="location form-select w-auto ml-10">
<option value="Nagpur">Nagpur</option>
<option value="Mumbai">Mumbai</option>
<option value="Delhi">Delhi</option>
Expand All @@ -70,10 +68,7 @@ function Header({ onSearch }) {

<div className="location-signin d-flex align-items-center">
{user ? (
<button
className="btn btn-outline-primary"
onClick={() => dispatch(logout(navigate))}
>
<button className="btn btn-outline-primary" onClick={() => dispatch(logout(navigate))}>
Log out
</button>
) : (
Expand All @@ -86,6 +81,7 @@ function Header({ onSearch }) {
</button>
</div>
)}

<div className="side-menu-toggle ml-4">
<button className="btn btn-outline-secondary" onClick={toggleMenu}>
☰
Expand Down