Skip to content

Commit 48bab4b

Browse files
sa-fw-ansa-fw-an
committed
Fixed Header
1 parent 49964cc commit 48bab4b

File tree

1 file changed

+56
-83
lines changed

1 file changed

+56
-83
lines changed

‎src/sections/Header.tsx‎

Lines changed: 56 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,11 @@ const Header: React.FC = () => {
5656
return (
5757
<>
5858
<div
59-
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
60-
scrolled ? 'backdrop-blur-md bg-white/90 shadow-lg' : 'bg-white'
61-
}`}
59+
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'backdrop-blur-md bg-white/90 shadow-lg' : 'bg-white'
60+
}`}
6261
>
63-
<div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8">
64-
<div className="flex justify-between items-center h-16 sm:h-18 md:h-20">
62+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
63+
<div className="flex justify-between items-center h-20">
6564
{/* Logo */}
6665
<Link
6766
to="/"
@@ -71,47 +70,40 @@ const Header: React.FC = () => {
7170
<img
7271
src={logo}
7372
alt="Sugar Labs"
74-
className="h-8 sm:h-10 md:h-12 w-auto transition-transform hover:scale-105"
73+
className="h-12 w-auto transition-transform hover:scale-105"
7574
/>
7675
</Link>
7776

7877
{/* Mobile Menu Button */}
7978
<button
80-
className="lg:hidden relative w-10 h-10 focus:outline-none focus:ring-2 focus:ring-blue-400
81-
focus:ring-opacity-50 rounded-md z-50"
79+
className="md:hidden relative w-10 h-10 focus:outline-none group z-50"
80+
8281
onClick={() => setMenuOpen(!menuOpen)}
8382
aria-label="Toggle menu"
8483
aria-expanded={menuOpen}
85-
aria-controls="mobile-menu"
8684
>
8785
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
8886
<span
89-
className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 ${
90-
menuOpen
91-
? 'rotate-45 translate-y-1.5'
92-
: 'translate-y-[-4px]'
93-
}`}
94-
aria-hidden="true"
87+
className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 ${menuOpen
88+
? 'rotate-45 translate-y-1.5'
89+
: 'translate-y-[-4px]'
90+
}`}
9591
/>
9692
<span
97-
className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 mt-1 ${
98-
menuOpen ? 'opacity-0' : ''
99-
}`}
100-
aria-hidden="true"
93+
className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 mt-1 ${menuOpen ? 'opacity-0' : ''
94+
}`}
10195
/>
10296
<span
103-
className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 mt-1 ${
104-
menuOpen
105-
? '-rotate-45 -translate-y-1.5'
106-
: 'translate-y-[4px]'
107-
}`}
108-
aria-hidden="true"
97+
className={`block w-6 h-0.5 bg-gray-600 transition-all duration-300 mt-1 ${menuOpen
98+
? '-rotate-45 -translate-y-1.5'
99+
: 'translate-y-[4px]'
100+
}`}
109101
/>
110102
</div>
111103
</button>
112104

113105
{/* Desktop Navigation */}
114-
<div className="hidden lg:flex lg:items-center lg:space-x-2 xl:space-x-6">
106+
<div className="hidden md:flex md:items-center md:space-x-8">
115107
{Object.entries(dropdowns).map(([key, { label, items }]) => (
116108
<div
117109
key={key}
@@ -120,21 +112,19 @@ const Header: React.FC = () => {
120112
onMouseLeave={() => setActiveDropdown(null)}
121113
>
122114
<button
123-
className={`px-2 xl:px-3 py-2 text-gray-700 hover:text-blue-600 text-sm xl:text-base font-medium rounded-md
115+
className={`px-3 py-2 text-gray-700 hover:text-blue-600 font-medium rounded-md
124116
transition-all duration-200 hover:bg-gray-50 flex items-center space-x-1
125117
${activeDropdown === key ? 'text-blue-600' : ''}`}
126118
aria-expanded={activeDropdown === key}
127-
aria-haspopup="true"
119+
128120
>
129121
<span>{label}</span>
130122
<svg
131-
className={`w-4 h-4 transition-transform duration-200 ${
132-
activeDropdown === key ? 'rotate-180' : ''
133-
}`}
123+
className={`w-4 h-4 transition-transform duration-200 ${activeDropdown === key ? 'rotate-180' : ''
124+
}`}
134125
fill="none"
135126
viewBox="0 0 24 24"
136127
stroke="currentColor"
137-
aria-hidden="true"
138128
>
139129
<path
140130
strokeLinecap="round"
@@ -152,10 +142,7 @@ const Header: React.FC = () => {
152142
animate={{ opacity: 1, y: 0 }}
153143
exit={{ opacity: 0, y: 10 }}
154144
transition={{ duration: 0.2 }}
155-
className="absolute left-0 mt-2 w-56 rounded-xl bg-white shadow-xl ring-1 ring-black ring-opacity-5 overflow-hidden z-50"
156-
role="menu"
157-
aria-orientation="vertical"
158-
aria-labelledby={`${key}-menu-button`}
145+
className="absolute left-0 mt-2 w-56 rounded-xl bg-white shadow-xl ring-1 ring-black ring-opacity-5 overflow-hidden"
159146
>
160147
<div className="py-2">
161148
{items.map((item) => (
@@ -164,12 +151,10 @@ const Header: React.FC = () => {
164151
to={item.path}
165152
className="group flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-gray-50
166153
transition-all duration-200 hover:text-blue-600"
167-
role="menuitem"
168154
>
169155
<span
170156
className="w-2 h-2 rounded-full bg-blue-600 opacity-0 group-hover:opacity-100
171157
transition-all duration-200 mr-2 transform scale-0 group-hover:scale-100"
172-
aria-hidden="true"
173158
/>
174159
{item.label}
175160
</Link>
@@ -182,27 +167,23 @@ const Header: React.FC = () => {
182167
))}
183168

184169
{/* Navigation Links */}
185-
{[
186-
'News',
187-
'Products',
188-
'Donate',
189-
'Join Development',
190-
'Volunteer',
191-
].map((item) => (
192-
<Link
193-
key={item}
194-
to={`/${item.toLowerCase().replace(' ', '-')}`}
195-
className="px-2 xl:px-3 py-2 text-gray-700 hover:text-blue-600 text-sm xl:text-base font-medium rounded-md
196-
transition-all duration-200 hover:bg-gray-50 whitespace-nowrap"
197-
>
198-
{item}
199-
</Link>
200-
))}
170+
{['Products', 'Donate', 'Join Development', 'Volunteer'].map(
171+
(item) => (
172+
<Link
173+
key={item}
174+
to={`/${item.toLowerCase().replace(' ', '-')}`}
175+
className="px-3 py-2 text-gray-700 hover:text-blue-600 font-medium rounded-md
176+
transition-all duration-200 hover:bg-gray-50"
177+
>
178+
{item}
179+
</Link>
180+
),
181+
)}
201182

202183
{/* CTA Button */}
203184
<Link
204185
to="/try-sugar"
205-
className="inline-flex items-center px-4 xl:px-6 py-2 xl:py-2.5 rounded-full text-sm xl:text-base font-semibold text-white
186+
className="inline-flex items-center px-6 py-2.5 rounded-full font-semibold text-white
206187
bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800
207188
transition-all duration-300 transform hover:scale-105 hover:shadow-lg
208189
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@@ -219,9 +200,9 @@ const Header: React.FC = () => {
219200
animate={{ opacity: 1 }}
220201
exit={{ opacity: 0 }}
221202
transition={{ duration: 0.2 }}
222-
className="fixed inset-0 bg-black/30 lg:hidden z-40"
203+
className="fixed inset-0 bg-black/30 md:hidden z-40"
223204
onClick={closeMenu}
224-
aria-hidden="true"
205+
225206
/>
226207
)}
227208
</AnimatePresence>
@@ -234,13 +215,12 @@ const Header: React.FC = () => {
234215
animate={{ opacity: 1, x: 0 }}
235216
exit={{ opacity: 0, x: '100%' }}
236217
transition={{ type: 'tween', duration: 0.3 }}
237-
className="fixed lg:hidden top-0 right-0 bottom-0 w-full xs:w-[85%] sm:w-[75%] md:w-[60%] max-w-sm bg-white shadow-xl z-40
218+
className="fixed md:hidden top-0 right-0 bottom-0 w-[80%] max-w-sm bg-white shadow-xl z-40
238219
flex flex-col h-screen overflow-y-auto"
239-
id="mobile-menu"
240220
>
241-
<div className="h-16 sm:h-18 md:h-20" aria-hidden="true" />
242-
<div className="flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:py-6">
243-
<div className="space-y-3 sm:space-y-4">
221+
<div className="h-20" />
222+
<div className="flex-1 overflow-y-auto overscroll-contain px-4 py-6">
223+
<div className="space-y-6">
244224
{Object.entries(dropdowns).map(
245225
([key, { label, items }]) => (
246226
<div key={key} className="space-y-2">
@@ -250,21 +230,18 @@ const Header: React.FC = () => {
250230
activeDropdown === key ? null : key,
251231
)
252232
}
253-
className="flex items-center justify-between w-full text-left px-3 py-2.5
254-
text-gray-700 font-medium rounded-lg hover:bg-gray-50 focus:outline-none
255-
focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
233+
className="flex items-center justify-between w-full text-left px-2 py-2
234+
text-gray-700 font-medium rounded-lg hover:bg-gray-50"
235+
256236
aria-expanded={activeDropdown === key}
257-
aria-controls={`${key}-mobile-menu`}
258237
>
259238
<span>{label}</span>
260239
<svg
261-
className={`w-5 h-5 transition-transform duration-200 ${
262-
activeDropdown === key ? 'rotate-180' : ''
263-
}`}
240+
className={`w-5 h-5 transition-transform duration-200 ${activeDropdown === key ? 'rotate-180' : ''
241+
}`}
264242
fill="none"
265243
viewBox="0 0 24 24"
266244
stroke="currentColor"
267-
aria-hidden="true"
268245
>
269246
<path
270247
strokeLinecap="round"
@@ -283,17 +260,15 @@ const Header: React.FC = () => {
283260
exit={{ height: 0, opacity: 0 }}
284261
transition={{ duration: 0.2 }}
285262
className="overflow-hidden"
286-
id={`${key}-mobile-menu`}
287263
>
288-
<div className="pl-4 space-y-1 sm:space-y-2">
264+
<div className="pl-4 space-y-2">
289265
{items.map((item) => (
290266
<Link
291267
key={item.path}
292268
to={item.path}
293269
onClick={closeMenu}
294-
className="flex items-center px-4 py-2.5 text-sm text-gray-600
295-
rounded-lg hover:bg-gray-50 hover:text-blue-600
296-
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
270+
className="flex items-center px-4 py-2 text-sm text-gray-600
271+
rounded-lg hover:bg-gray-50 hover:text-blue-600"
297272
>
298273
{item.label}
299274
</Link>
@@ -307,7 +282,7 @@ const Header: React.FC = () => {
307282
)}
308283

309284
{[
310-
'News',
285+
311286
'Products',
312287
'Donate',
313288
'Join Development',
@@ -317,23 +292,21 @@ const Header: React.FC = () => {
317292
key={item}
318293
to={`/${item.toLowerCase().replace(' ', '-')}`}
319294
onClick={closeMenu}
320-
className="block px-4 py-2.5 text-gray-700 font-medium rounded-lg
321-
hover:bg-gray-50 hover:text-blue-600 focus:outline-none
322-
focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50"
295+
className="block px-4 py-2 text-gray-700 font-medium rounded-lg
296+
hover:bg-gray-50 hover:text-blue-600"
323297
>
324298
{item}
325299
</Link>
326300
))}
327301
</div>
328302
</div>
329-
<div className="p-4 border-t border-gray-200 safe-area-bottom">
303+
<div className="p-4 border-t border-gray-200">
330304
<Link
331305
to="/try-sugar"
332306
onClick={closeMenu}
333307
className="flex items-center justify-center px-6 py-3 rounded-xl font-semibold
334308
text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700
335-
hover:to-blue-800 transition-all duration-300 w-full focus:outline-none
336-
focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
309+
hover:to-blue-800 transition-all duration-300 w-full"
337310
>
338311
TRY NOW
339312
</Link>
@@ -344,7 +317,7 @@ const Header: React.FC = () => {
344317
</div>
345318
</div>
346319
</div>
347-
<div className="h-16 sm:h-18 md:h-20" aria-hidden="true" />
320+
<div className="h-10" />
348321
</>
349322
);
350323
};

0 commit comments

Comments
 (0)