Skip to content

Commit ed2dba6

Browse files
Alexandrbig1Alexandrbig1
authored
Merge pull request #92 from anasfarock/fix/#12-main-header-ui-optimization
Fix/#12 main header UI optimization
2 parents d94768e + b0aceb0 commit ed2dba6

1 file changed

Lines changed: 119 additions & 21 deletions

File tree

‎src/components/Header/MainHeader.jsx‎

Lines changed: 119 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default function Header() {
2020
return (
2121
<>
2222
<TopHeader />
23-
<header className="bg-white shadow-md w-full fixed top-10 left-0 z-50">
23+
<header className="bg-white shadow-md w-full fixed top-10 left-0 z-50 transition-all">
2424
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
2525
<div className="flex justify-between items-center h-16">
2626
{/* Left: Logo */}
@@ -36,54 +36,97 @@ export default function Header() {
3636

3737
{/* Center: Desktop Navigation */}
3838
<nav className="hidden md:flex space-x-8">
39+
{/* Shop Dropdown */}
3940
<div className="relative">
4041
<button
4142
onClick={() => setShopOpen(!shopOpen)}
42-
className="flex items-center gap-1 text-gray-700 hover:text-black"
43+
className="group flex items-center gap-1 text-gray-700 hover:text-black transition"
4344
>
44-
Shop <ChevronDown className="h-4 w-4" />
45+
<span className="relative after:absolute after:left-0 after:-bottom-1 after:h-[2px] after:w-0 after:bg-black after:transition-all group-hover:after:w-full">
46+
Shop
47+
</span>
48+
<ChevronDown
49+
className={`h-4 w-4 transition-transform duration-300 ${
50+
shopOpen ? 'rotate-180' : 'rotate-0'
51+
}`}
52+
/>
4553
</button>
4654
{shopOpen && (
47-
<div className="absolute left-0 top-full mt-2 w-screen max-w-4xl bg-white shadow-lg p-6">
55+
<div className="absolute left-0 top-full mt-2 w-screen max-w-4xl bg-white shadow-lg p-6 animate-fadeIn">
4856
<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>
57+
<div className="p-4 bg-gray-100 rounded hover:bg-gray-200 transition">
58+
Category 1
59+
</div>
60+
<div className="p-4 bg-gray-100 rounded hover:bg-gray-200 transition">
61+
Category 2
62+
</div>
63+
<div className="p-4 bg-gray-100 rounded hover:bg-gray-200 transition">
64+
Category 3
65+
</div>
5266
</div>
5367
</div>
5468
)}
5569
</div>
5670

57-
<Link to="/garage-sale" className="text-gray-700 hover:text-black">
71+
<Link
72+
to="/garage-sale"
73+
className="relative text-gray-700 hover:text-black transition group"
74+
>
5875
Garage Sale
76+
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-black transition-all duration-300 group-hover:w-full"></span>
5977
</Link>
60-
<Link to="/products" className="text-gray-700 hover:text-black">
78+
79+
<Link
80+
to="/products"
81+
className="relative text-gray-700 hover:text-black transition group"
82+
>
6183
All Products
84+
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-black transition-all duration-300 group-hover:w-full"></span>
6285
</Link>
63-
<Link to="/about-corex" className="text-gray-700 hover:text-black">
86+
87+
<Link
88+
to="/about-corex"
89+
className="relative text-gray-700 hover:text-black transition group"
90+
>
6491
About CoreX
92+
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-black transition-all duration-300 group-hover:w-full"></span>
6593
</Link>
6694
</nav>
6795

68-
{/* Right Icons */}
96+
{/* Right: Icons (desktop) + Mobile Hamburger */}
6997
<div className="flex items-center space-x-6">
98+
{/* Desktop Icons */}
7099
<div className="hidden md:flex items-center space-x-6 text-gray-700">
71100
<button
72101
aria-label="Search"
73102
onClick={() => setSearch(true)}
74-
className="cursor-pointer flex items-center"
103+
className="transform transition-transform duration-200 hover:scale-110 hover:text-black cursor-pointer"
75104
>
76-
<Search className="h-5 w-5 hover:text-black" />
105+
<Search className="h-5 w-5" />
77106
</button>
78107

79-
<a href="#" aria-label="Wishlist">
80-
<Heart className="h-5 w-5 hover:text-black" />
108+
<a
109+
href="#"
110+
aria-label="Wishlist"
111+
className="transform transition-transform duration-200 hover:scale-110 hover:text-black"
112+
>
113+
<Heart className="h-5 w-5" />
81114
</a>
82-
<a href="#" aria-label="User Account">
83-
<User className="h-5 w-5 hover:text-black" />
115+
116+
<a
117+
href="#"
118+
aria-label="User Account"
119+
className="transform transition-transform duration-200 hover:scale-110 hover:text-black"
120+
>
121+
<User className="h-5 w-5" />
84122
</a>
85-
<a href="#" aria-label="Shopping Cart">
86-
<ShoppingCart className="h-5 w-5 hover:text-black" />
123+
124+
<a
125+
href="#"
126+
aria-label="Shopping Cart"
127+
className="transform transition-transform duration-200 hover:scale-110 hover:text-black"
128+
>
129+
<ShoppingCart className="h-5 w-5" />
87130
</a>
88131
</div>
89132

@@ -99,16 +142,71 @@ export default function Header() {
99142
<button
100143
onClick={() => setMobileOpen(!mobileOpen)}
101144
className="text-gray-700 hover:text-black"
145+
aria-label="Menu"
102146
>
103147
{mobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
104148
</button>
105149
</div>
106150
</div>
107151
</div>
108152
</div>
153+
154+
{/* Mobile Menu */}
155+
{mobileOpen && (
156+
<div className="md:hidden bg-white shadow-md animate-fadeIn">
157+
<nav className="flex flex-col space-y-2 p-4">
158+
<button
159+
onClick={() => setShopOpen(!shopOpen)}
160+
className="flex items-center justify-between text-gray-700 hover:text-black transition"
161+
>
162+
<span>Shop</span>
163+
<ChevronDown
164+
className={`h-4 w-4 transition-transform duration-300 ${
165+
shopOpen ? 'rotate-180' : 'rotate-0'
166+
}`}
167+
/>
168+
</button>
169+
170+
{shopOpen && (
171+
<div className="flex flex-col space-y-2 pl-4">
172+
{['Category 1', 'Category 2', 'Category 3'].map((cat) => (
173+
<a
174+
key={cat}
175+
href="#"
176+
className="text-gray-600 hover:text-black transition"
177+
>
178+
{cat}
179+
</a>
180+
))}
181+
</div>
182+
)}
183+
184+
<Link
185+
to="/garage-sale"
186+
className="text-gray-700 hover:text-black transition"
187+
>
188+
Garage Sale
189+
</Link>
190+
191+
<Link
192+
to="/products"
193+
className="text-gray-700 hover:text-black transition"
194+
>
195+
All Products
196+
</Link>
197+
198+
<Link
199+
to="/about-corex"
200+
className="text-gray-700 hover:text-black transition"
201+
>
202+
About CoreX
203+
</Link>
204+
</nav>
205+
</div>
206+
)}
109207
</header>
110208

111-
{/* 🔍 Right Slide Search Drawer */}
209+
{/* Right Slide Search Drawer */}
112210
{search && (
113211
<div className="fixed inset-0 z-[9999] flex justify-end bg-black/40">
114212
{/* Drawer */}
@@ -130,4 +228,4 @@ export default function Header() {
130228
)}
131229
</>
132230
);
133-
}
231+
}

0 commit comments

Comments
 (0)