Skip to content

Commit 8823767

Browse files
anasfarockanasfarock
committed
added hover animations, increased logo size, add chevron down icon
1 parent abedafc commit 8823767

1 file changed

Lines changed: 79 additions & 67 deletions

File tree

‎src/components/Header/MainHeader.jsx‎

Lines changed: 79 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useState } from 'react';
2-
import { Link } from 'react-router-dom';
32
import {
43
Menu,
54
X,
@@ -15,18 +14,16 @@ export default function Header() {
1514
const [shopOpen, setShopOpen] = useState(false);
1615

1716
return (
18-
<header className="bg-white shadow-md w-full fixed top-8 left-0 z-50">
17+
<header className="bg-white shadow-md w-full fixed top-9 left-0 z-50 transition-all">
1918
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
2019
<div className="flex justify-between items-center h-16">
2120
{/* Left: Logo */}
2221
<div className="flex-shrink-0">
23-
<Link to="/">
24-
<img
25-
src="/images/official-logo-core-x.svg"
26-
alt="CoreX Logo"
27-
className="h-8 w-auto"
28-
/>
29-
</Link>
22+
<img
23+
src="/images/official-logo-core-x.svg"
24+
alt="CoreX Logo"
25+
className="h-10 w-auto"
26+
/>
3027
</div>
3128

3229
{/* Center: Desktop Navigation */}
@@ -35,48 +32,65 @@ export default function Header() {
3532
<div className="relative">
3633
<button
3734
onClick={() => setShopOpen(!shopOpen)}
38-
className="flex items-center gap-1 text-gray-700 hover:text-black"
35+
className="group flex items-center gap-1 text-gray-700 hover:text-black transition"
3936
>
40-
Shop <ChevronDown className="h-4 w-4" />
37+
<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">
38+
Shop
39+
</span>
40+
<ChevronDown
41+
className={`h-4 w-4 transition-transform duration-300 ${
42+
shopOpen ? 'rotate-180' : 'rotate-0'
43+
}`}
44+
/>
4145
</button>
4246
{shopOpen && (
43-
<div className="absolute left-0 top-full mt-2 w-screen max-w-4xl bg-white shadow-lg p-6">
47+
<div className="absolute left-0 top-full mt-2 w-screen max-w-4xl bg-white shadow-lg p-6 animate-fadeIn">
4448
<div className="grid grid-cols-3 gap-4">
45-
<div className="p-4 bg-gray-100 rounded">Category 1</div>
46-
<div className="p-4 bg-gray-100 rounded">Category 2</div>
47-
<div className="p-4 bg-gray-100 rounded">Category 3</div>
49+
<div className="p-4 bg-gray-100 rounded hover:bg-gray-200 transition">
50+
Category 1
51+
</div>
52+
<div className="p-4 bg-gray-100 rounded hover:bg-gray-200 transition">
53+
Category 2
54+
</div>
55+
<div className="p-4 bg-gray-100 rounded hover:bg-gray-200 transition">
56+
Category 3
57+
</div>
4858
</div>
4959
</div>
5060
)}
5161
</div>
5262

53-
<Link to="garage-sale" className="text-gray-700 hover:text-black">
54-
Garage Sale
55-
</Link>
56-
<Link to="/products" className="text-gray-700 hover:text-black">
57-
All Products
58-
</Link>
59-
<Link to="/about-corex" className="text-gray-700 hover:text-black">
60-
About CoreX
61-
</Link>
63+
{['Garage Sale', 'All Products', 'About CoreX'].map((link) => (
64+
<a
65+
key={link}
66+
href="#"
67+
className="relative text-gray-700 hover:text-black transition group"
68+
>
69+
{link}
70+
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-black transition-all duration-300 group-hover:w-full"></span>
71+
</a>
72+
))}
6273
</nav>
6374

6475
{/* Right: Icons (desktop) + Mobile Hamburger */}
6576
<div className="flex items-center space-x-6">
6677
{/* Desktop Icons */}
6778
<div className="hidden md:flex items-center space-x-6 text-gray-700">
68-
<a href="#" aria-label="Search">
69-
<Search className="h-5 w-5 hover:text-black" />
70-
</a>
71-
<a href="#" aria-label="Wishlist">
72-
<Heart className="h-5 w-5 hover:text-black" />
73-
</a>
74-
<a href="#" aria-label="User Account">
75-
<User className="h-5 w-5 hover:text-black" />
76-
</a>
77-
<a href="#" aria-label="Shopping Cart">
78-
<ShoppingCart className="h-5 w-5 hover:text-black" />
79-
</a>
79+
{[
80+
{ icon: Search, label: 'Search' },
81+
{ icon: Heart, label: 'Wishlist' },
82+
{ icon: User, label: 'User Account' },
83+
{ icon: ShoppingCart, label: 'Shopping Cart' },
84+
].map(({ icon: Icon, label }) => (
85+
<a
86+
key={label}
87+
href="#"
88+
aria-label={label}
89+
className="transform transition-transform duration-200 hover:scale-110 hover:text-black"
90+
>
91+
<Icon className="h-5 w-5" />
92+
</a>
93+
))}
8094
</div>
8195

8296
{/* Mobile Hamburger */}
@@ -98,48 +112,46 @@ export default function Header() {
98112

99113
{/* Mobile Menu */}
100114
{mobileOpen && (
101-
<div className="md:hidden bg-white shadow-md">
115+
<div className="md:hidden bg-white shadow-md animate-fadeIn">
102116
<nav className="flex flex-col space-y-2 p-4">
103117
<button
104118
onClick={() => setShopOpen(!shopOpen)}
105-
className="flex items-center justify-between text-gray-700 hover:text-black"
119+
className="flex items-center justify-between text-gray-700 hover:text-black transition"
106120
>
107-
Shop <ChevronDown className="h-4 w-4" />
121+
<span>Shop</span>
122+
<ChevronDown
123+
className={`h-4 w-4 transition-transform duration-300 ${
124+
shopOpen ? 'rotate-180' : 'rotate-0'
125+
}`}
126+
/>
108127
</button>
128+
109129
{shopOpen && (
110130
<div className="flex flex-col space-y-2 pl-4">
111-
<a href="#" className="text-gray-600 hover:text-black">
112-
Category 1
113-
</a>
114-
<a href="#" className="text-gray-600 hover:text-black">
115-
Category 2
116-
</a>
117-
<a href="#" className="text-gray-600 hover:text-black">
118-
Category 3
119-
</a>
131+
{['Category 1', 'Category 2', 'Category 3'].map((cat) => (
132+
<a
133+
key={cat}
134+
href="#"
135+
className="text-gray-600 hover:text-black transition"
136+
>
137+
{cat}
138+
</a>
139+
))}
120140
</div>
121141
)}
122-
<Link
123-
to="/garage-sale" className="text-gray-700 hover:text-black">
124-
Garage Sale
125-
</Link>
126-
<Link
127-
to="/products"
128-
className="text-gray-700 hover:text-black"
129-
onClick={() => setMobileOpen(false)}
130-
>
131-
All Products
132-
</Link>
133-
<Link
134-
to="/about-corex"
135-
className="text-gray-700 hover:text-black"
136-
onClick={() => setMobileOpen(false)}
137-
>
138-
About CoreX
139-
</Link>
142+
143+
{['Garage Sale', 'All Products', 'About CoreX'].map((link) => (
144+
<a
145+
key={link}
146+
href="#"
147+
className="text-gray-700 hover:text-black transition"
148+
>
149+
{link}
150+
</a>
151+
))}
140152
</nav>
141153
</div>
142154
)}
143155
</header>
144156
);
145-
}
157+
}

0 commit comments

Comments
 (0)