Skip to content

Commit 6fd1b48

Browse files
ashishgit10ashishgit10
committed
Fix : Search modal closes on input focus and search results
1 parent d91ae35 commit 6fd1b48

4 files changed

Lines changed: 209 additions & 222 deletions

File tree

‎src/components/Header/MainHeader.jsx‎

Lines changed: 101 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -9,163 +9,125 @@ import {
99
User,
1010
ShoppingCart,
1111
} from 'lucide-react';
12-
import SearchBox from '../Search/SearchBox';
12+
import SearchBox from '../Search/SearchBox';
13+
import TopHeader from "../TopHeader/TopHeader";
1314

1415
export default function Header() {
1516
const [mobileOpen, setMobileOpen] = useState(false);
1617
const [shopOpen, setShopOpen] = useState(false);
1718
const [search, setSearch] = useState(false);
1819

19-
2020
return (
21-
<header className="bg-white shadow-md w-full fixed top-8 left-0 z-50">
22-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
23-
<div className="flex justify-between items-center h-16">
24-
{/* Left: Logo */}
25-
<div className="flex-shrink-0">
26-
<Link to="/">
27-
<img
28-
src="/images/official-logo-core-x.svg"
29-
alt="CoreX Logo"
30-
className="h-8 w-auto"
31-
/>
32-
</Link>
33-
</div>
34-
35-
{/* Center: Desktop Navigation */}
36-
<nav className="hidden md:flex space-x-8">
37-
{/* Shop Dropdown */}
38-
<div className="relative">
39-
<button
40-
onClick={() => setShopOpen(!shopOpen)}
41-
className="flex items-center gap-1 text-gray-700 hover:text-black"
42-
>
43-
Shop <ChevronDown className="h-4 w-4" />
44-
</button>
45-
{shopOpen && (
46-
<div className="absolute left-0 top-full mt-2 w-screen max-w-4xl bg-white shadow-lg p-6">
47-
<div className="grid grid-cols-3 gap-4">
48-
<div className="p-4 bg-gray-100 rounded">Category 1</div>
49-
<div className="p-4 bg-gray-100 rounded">Category 2</div>
50-
<div className="p-4 bg-gray-100 rounded">Category 3</div>
51-
</div>
52-
</div>
53-
)}
21+
<>
22+
<TopHeader />
23+
<header className="bg-white shadow-md w-full fixed top-10 left-0 z-50">
24+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25+
<div className="flex justify-between items-center h-16">
26+
{/* Left: Logo */}
27+
<div className="flex-shrink-0">
28+
<Link to="/">
29+
<img
30+
src="/images/official-logo-core-x.svg"
31+
alt="CoreX Logo"
32+
className="h-8 w-auto"
33+
/>
34+
</Link>
5435
</div>
5536

56-
<Link to="garage-sale" className="text-gray-700 hover:text-black">
57-
Garage Sale
58-
</Link>
59-
<Link to="/products" className="text-gray-700 hover:text-black">
60-
All Products
61-
</Link>
62-
<Link to="/about-corex" className="text-gray-700 hover:text-black">
63-
About CoreX
64-
</Link>
65-
</nav>
66-
67-
{/* Right: Icons (desktop) + Mobile Hamburger */}
68-
<div className="flex items-center space-x-6">
69-
{/* Desktop Icons */}
70-
<div className="hidden md:flex items-center space-x-6 text-gray-700">
71-
{/* search box logic */}
72-
<a aria-label="Search"
73-
onClick={() => setSearch(!search)}
74-
className="cursor-pointer ">
75-
<Search className="h-5 w-5 hover:text-black" />
76-
{(search) &&
77-
<div className='fixed h-full w-1/2 top-0 right-0 z-5'>
78-
<div className='flex items-center w-full justify-between mt-2 h-15 px-2 bg-gray-100'>
79-
<div className='font-bold text-lg mr-4'>
80-
<p>SEARCH</p>
81-
</div>
82-
<div className='font-bold text-lg mr-4'>
83-
<button
84-
className='cursor-pointer'
85-
onClick={() =>{
86-
setSearch(!search);
87-
} }
88-
>x</button>
37+
{/* Center: Desktop Navigation */}
38+
<nav className="hidden md:flex space-x-8">
39+
<div className="relative">
40+
<button
41+
onClick={() => setShopOpen(!shopOpen)}
42+
className="flex items-center gap-1 text-gray-700 hover:text-black"
43+
>
44+
Shop <ChevronDown className="h-4 w-4" />
45+
</button>
46+
{shopOpen && (
47+
<div className="absolute left-0 top-full mt-2 w-screen max-w-4xl bg-white shadow-lg p-6">
48+
<div className="grid grid-cols-3 gap-4">
49+
<div className="p-4 bg-gray-100 rounded">Category 1</div>
50+
<div className="p-4 bg-gray-100 rounded">Category 2</div>
51+
<div className="p-4 bg-gray-100 rounded">Category 3</div>
8952
</div>
9053
</div>
91-
<SearchBox
92-
className=""
93-
/>
94-
</div>
95-
}
96-
</a>
97-
<a href="#" aria-label="Wishlist">
98-
<Heart className="h-5 w-5 hover:text-black" />
99-
</a>
100-
<a href="#" aria-label="User Account">
101-
<User className="h-5 w-5 hover:text-black" />
102-
</a>
103-
<a href="#" aria-label="Shopping Cart">
104-
<ShoppingCart className="h-5 w-5 hover:text-black" />
105-
</a>
54+
)}
55+
</div>
56+
57+
<Link to="/garage-sale" className="text-gray-700 hover:text-black">
58+
Garage Sale
59+
</Link>
60+
<Link to="/products" className="text-gray-700 hover:text-black">
61+
All Products
62+
</Link>
63+
<Link to="/about-corex" className="text-gray-700 hover:text-black">
64+
About CoreX
65+
</Link>
66+
</nav>
67+
68+
{/* Right Icons */}
69+
<div className="flex items-center space-x-6">
70+
<div className="hidden md:flex items-center space-x-6 text-gray-700">
71+
<button
72+
aria-label="Search"
73+
onClick={() => setSearch(true)}
74+
className="cursor-pointer flex items-center"
75+
>
76+
<Search className="h-5 w-5 hover:text-black" />
77+
</button>
78+
79+
<a href="#" aria-label="Wishlist">
80+
<Heart className="h-5 w-5 hover:text-black" />
81+
</a>
82+
<a href="#" aria-label="User Account">
83+
<User className="h-5 w-5 hover:text-black" />
84+
</a>
85+
<a href="#" aria-label="Shopping Cart">
86+
<ShoppingCart className="h-5 w-5 hover:text-black" />
87+
</a>
88+
</div>
89+
90+
{/* Mobile Hamburger */}
91+
<div className="md:hidden flex items-center space-x-4">
92+
<button
93+
onClick={() => setSearch(true)}
94+
className="text-gray-700 hover:text-black"
95+
aria-label="Search"
96+
>
97+
<Search className="h-5 w-5" />
98+
</button>
99+
<button
100+
onClick={() => setMobileOpen(!mobileOpen)}
101+
className="text-gray-700 hover:text-black"
102+
>
103+
{mobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
104+
</button>
105+
</div>
106106
</div>
107+
</div>
108+
</div>
109+
</header>
107110

108-
{/* Mobile Hamburger */}
109-
<div className="md:hidden">
111+
{/* 🔍 Right Slide Search Drawer */}
112+
{search && (
113+
<div className="fixed inset-0 z-[9999] flex justify-end bg-black/40">
114+
{/* Drawer */}
115+
<div className="relative w-full sm:w-[580px] bg-white h-full shadow-2xl transform transition-transform duration-300 ease-in-out translate-x-0">
116+
<div className="flex justify-between items-center p-6 border-b">
117+
<h2 className="text-lg font-bold text-gray-900">SEARCH</h2>
110118
<button
111-
onClick={() => setMobileOpen(!mobileOpen)}
112-
className="text-gray-700 hover:text-black"
119+
onClick={() => setSearch(false)}
120+
className="text-gray-600 hover:text-black"
113121
>
114-
{mobileOpen ? (
115-
<X className="h-6 w-6" />
116-
) : (
117-
<Menu className="h-6 w-6" />
118-
)}
122+
<X className="h-5 w-5" />
119123
</button>
120124
</div>
125+
<div className="p-6 overflow-y-auto h-[calc(100%-80px)]">
126+
<SearchBox />
127+
</div>
121128
</div>
122129
</div>
123-
</div>
124-
125-
{/* Mobile Menu */}
126-
{mobileOpen && (
127-
<div className="md:hidden bg-white shadow-md">
128-
<nav className="flex flex-col space-y-2 p-4">
129-
<button
130-
onClick={() => setShopOpen(!shopOpen)}
131-
className="flex items-center justify-between text-gray-700 hover:text-black"
132-
>
133-
Shop <ChevronDown className="h-4 w-4" />
134-
</button>
135-
{shopOpen && (
136-
<div className="flex flex-col space-y-2 pl-4">
137-
<a href="#" className="text-gray-600 hover:text-black">
138-
Category 1
139-
</a>
140-
<a href="#" className="text-gray-600 hover:text-black">
141-
Category 2
142-
</a>
143-
<a href="#" className="text-gray-600 hover:text-black">
144-
Category 3
145-
</a>
146-
</div>
147-
)}
148-
<Link
149-
to="/garage-sale" className="text-gray-700 hover:text-black">
150-
Garage Sale
151-
</Link>
152-
<Link
153-
to="/products"
154-
className="text-gray-700 hover:text-black"
155-
onClick={() => setMobileOpen(false)}
156-
>
157-
All Products
158-
</Link>
159-
<Link
160-
to="/about-corex"
161-
className="text-gray-700 hover:text-black"
162-
onClick={() => setMobileOpen(false)}
163-
>
164-
About CoreX
165-
</Link>
166-
</nav>
167-
</div>
168130
)}
169-
</header>
131+
</>
170132
);
171-
}
133+
}

0 commit comments

Comments
 (0)