Skip to content

Commit a272c3d

Browse files
nikohoffrennikohoffren
committed
style: fix dropdown menu hover effect in mobile view
1 parent 5f5daa2 commit a272c3d

2 files changed

Lines changed: 60 additions & 41 deletions

File tree

‎components/layout/Header.tsx‎

Lines changed: 57 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,21 @@ const Header = () => {
3838
})
3939
}, [])
4040

41+
useEffect(() => {
42+
// Close all dropdowns when route changes
43+
const handleRouteChange = () => {
44+
setLanguageDropdownOpen(false)
45+
setFrameworkDropdownOpen(false)
46+
setGitSelectionDropdownOpen(false)
47+
setRoadmapDropdownOpen(false)
48+
}
49+
50+
router.events.on('routeChangeStart', handleRouteChange)
51+
return () => {
52+
router.events.off('routeChangeStart', handleRouteChange)
53+
}
54+
}, [router])
55+
4156
const toggleSideNav = () => {
4257
setIsOpen(!isOpen)
4358
}
@@ -103,7 +118,7 @@ const Header = () => {
103118
}
104119

105120
return (
106-
<nav className='border-b border-gray-200 bg-white shadow-md'>
121+
<nav className='border-b border-gray-200 bg-[var(--bg-primary)] shadow-md dark:border-gray-700'>
107122
<div className='modern-container'>
108123
<div className='flex h-16 items-center justify-between'>
109124
<div className='flex items-center space-x-8'>
@@ -123,12 +138,12 @@ const Header = () => {
123138
>
124139
<button
125140
onClick={toggleLanguageDropdown}
126-
className='flex items-center transition-colors hover:text-modern-purple'
141+
className='flex items-center transition-colors duration-200 hover:text-[var(--accent-color)]'
127142
style={{ color: 'var(--fc-primary)' }}
128143
>
129144
<span className='font-medium'>Languages</span>
130145
<svg
131-
className={`ml-1 h-4 w-4 transition-transform ${isLanguageDropdownOpen ? 'rotate-180' : ''}`}
146+
className={`ml-1 h-4 w-4 transition-transform duration-200 ${isLanguageDropdownOpen ? 'rotate-180' : ''}`}
132147
fill='none'
133148
viewBox='0 0 24 24'
134149
stroke='currentColor'
@@ -143,7 +158,7 @@ const Header = () => {
143158
</button>
144159
{isLanguageDropdownOpen && (
145160
<div
146-
className='scrollable-dropdown absolute z-50 mt-2 w-60 rounded-md py-1 shadow-lg'
161+
className='scrollable-dropdown absolute z-50 mt-2 w-60 rounded-md py-1 shadow-lg transition-all duration-200'
147162
style={{
148163
backgroundColor: 'var(--bg-secondary)',
149164
color: 'var(--fc-primary)'
@@ -153,10 +168,9 @@ const Header = () => {
153168
<button
154169
key={language.name}
155170
onClick={() => navigateToLanguage(language.link)}
156-
className='block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-[var(--bg-hover)]'
171+
className='block w-full px-4 py-2 text-left text-sm transition-all duration-200 hover:bg-[var(--bg-hover)] hover:text-[var(--accent-color)]'
157172
style={{
158-
color: 'var(--fc-primary)',
159-
backgroundColor: 'var(--bg-secondary)'
173+
color: 'var(--fc-primary)'
160174
}}
161175
>
162176
{language.name}
@@ -172,12 +186,12 @@ const Header = () => {
172186
>
173187
<button
174188
onClick={toggleFrameworkDropdown}
175-
className='flex items-center transition-colors hover:text-modern-purple'
189+
className='flex items-center transition-colors duration-200 hover:text-[var(--accent-color)]'
176190
style={{ color: 'var(--fc-primary)' }}
177191
>
178192
<span className='font-medium'>Frameworks</span>
179193
<svg
180-
className={`ml-1 h-4 w-4 transition-transform ${isFrameworkDropdownOpen ? 'rotate-180' : ''}`}
194+
className={`ml-1 h-4 w-4 transition-transform duration-200 ${isFrameworkDropdownOpen ? 'rotate-180' : ''}`}
181195
fill='none'
182196
viewBox='0 0 24 24'
183197
stroke='currentColor'
@@ -192,7 +206,7 @@ const Header = () => {
192206
</button>
193207
{isFrameworkDropdownOpen && (
194208
<div
195-
className='scrollable-dropdown absolute z-50 mt-2 w-60 rounded-md py-1 shadow-lg'
209+
className='scrollable-dropdown absolute z-50 mt-2 w-60 rounded-md py-1 shadow-lg transition-all duration-200'
196210
style={{
197211
backgroundColor: 'var(--bg-secondary)',
198212
color: 'var(--fc-primary)'
@@ -202,10 +216,9 @@ const Header = () => {
202216
<button
203217
key={framework.name}
204218
onClick={() => navigateToFramework(framework.link)}
205-
className='block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-[var(--bg-hover)]'
219+
className='block w-full px-4 py-2 text-left text-sm transition-all duration-200 hover:bg-[var(--bg-hover)] hover:text-[var(--accent-color)]'
206220
style={{
207-
color: 'var(--fc-primary)',
208-
backgroundColor: 'var(--bg-secondary)'
221+
color: 'var(--fc-primary)'
209222
}}
210223
>
211224
{framework.name}
@@ -221,12 +234,12 @@ const Header = () => {
221234
>
222235
<button
223236
onClick={toggleGitSelectionDropdown}
224-
className='flex items-center transition-colors hover:text-modern-purple'
237+
className='flex items-center transition-colors duration-200 hover:text-[var(--accent-color)]'
225238
style={{ color: 'var(--fc-primary)' }}
226239
>
227240
<span className='font-medium'>Git</span>
228241
<svg
229-
className={`ml-1 h-4 w-4 transition-transform ${isGitSelectionDropdownOpen ? 'rotate-180' : ''}`}
242+
className={`ml-1 h-4 w-4 transition-transform duration-200 ${isGitSelectionDropdownOpen ? 'rotate-180' : ''}`}
230243
fill='none'
231244
viewBox='0 0 24 24'
232245
stroke='currentColor'
@@ -241,7 +254,7 @@ const Header = () => {
241254
</button>
242255
{isGitSelectionDropdownOpen && (
243256
<div
244-
className='scrollable-dropdown absolute z-50 mt-2 w-60 rounded-md py-1 shadow-lg'
257+
className='scrollable-dropdown absolute z-50 mt-2 w-60 rounded-md py-1 shadow-lg transition-all duration-200'
245258
style={{
246259
backgroundColor: 'var(--bg-secondary)',
247260
color: 'var(--fc-primary)'
@@ -251,10 +264,9 @@ const Header = () => {
251264
<button
252265
key={git.name}
253266
onClick={() => navigateToGitSelection(git.link)}
254-
className='block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-[var(--bg-hover)]'
267+
className='block w-full px-4 py-2 text-left text-sm transition-all duration-200 hover:bg-[var(--bg-hover)] hover:text-[var(--accent-color)]'
255268
style={{
256-
color: 'var(--fc-primary)',
257-
backgroundColor: 'var(--bg-secondary)'
269+
color: 'var(--fc-primary)'
258270
}}
259271
>
260272
{git.name}
@@ -270,12 +282,12 @@ const Header = () => {
270282
>
271283
<button
272284
onClick={toggleRoadmapDropdown}
273-
className='flex items-center transition-colors hover:text-modern-purple'
285+
className='flex items-center transition-colors duration-200 hover:text-[var(--accent-color)]'
274286
style={{ color: 'var(--fc-primary)' }}
275287
>
276288
<span className='font-medium'>Roadmap</span>
277289
<svg
278-
className={`ml-1 h-4 w-4 transition-transform ${isRoadmapDropdownOpen ? 'rotate-180' : ''}`}
290+
className={`ml-1 h-4 w-4 transition-transform duration-200 ${isRoadmapDropdownOpen ? 'rotate-180' : ''}`}
279291
fill='none'
280292
viewBox='0 0 24 24'
281293
stroke='currentColor'
@@ -290,7 +302,7 @@ const Header = () => {
290302
</button>
291303
{isRoadmapDropdownOpen && (
292304
<div
293-
className='scrollable-dropdown absolute z-50 mt-2 w-60 rounded-md py-1 shadow-lg'
305+
className='scrollable-dropdown absolute z-50 mt-2 w-60 rounded-md py-1 shadow-lg transition-all duration-200'
294306
style={{
295307
backgroundColor: 'var(--bg-secondary)',
296308
color: 'var(--fc-primary)'
@@ -300,10 +312,9 @@ const Header = () => {
300312
<button
301313
key={roadmap.name}
302314
onClick={() => navigateToRoadmap(roadmap.link)}
303-
className='block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-[var(--bg-hover)]'
315+
className='block w-full px-4 py-2 text-left text-sm transition-all duration-200 hover:bg-[var(--bg-hover)] hover:text-[var(--accent-color)]'
304316
style={{
305-
color: 'var(--fc-primary)',
306-
backgroundColor: 'var(--bg-secondary)'
317+
color: 'var(--fc-primary)'
307318
}}
308319
>
309320
{roadmap.name}
@@ -381,12 +392,13 @@ const Header = () => {
381392

382393
{/* Mobile menu */}
383394
{isOpen && (
384-
<div className='z-50 bg-white shadow-lg md:hidden'>
395+
<div className='z-50 bg-[var(--bg-primary)] shadow-lg md:hidden'>
385396
<div className='space-y-1 px-2 pb-3 pt-2 sm:px-3'>
386-
<div className='block px-3 py-2 text-base font-medium text-gray-700'>
397+
<div className='block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-200'>
387398
<button
388399
onClick={toggleLanguageDropdown}
389-
className='flex w-full items-center justify-between'
400+
className='flex w-full items-center justify-between hover:text-modern-purple dark:text-gray-200'
401+
style={{ color: 'var(--fc-primary)' }}
390402
>
391403
<span>Languages</span>
392404
<svg
@@ -409,7 +421,8 @@ const Header = () => {
409421
<button
410422
key={language.name}
411423
onClick={() => navigateToLanguage(language.link)}
412-
className='block w-full py-1 text-left text-sm text-gray-600 hover:text-modern-purple'
424+
className='block w-full py-1 text-left text-sm hover:text-modern-purple dark:text-gray-200'
425+
style={{ color: 'var(--fc-primary)' }}
413426
>
414427
{language.name}
415428
</button>
@@ -418,10 +431,11 @@ const Header = () => {
418431
)}
419432
</div>
420433

421-
<div className='block px-3 py-2 text-base font-medium text-gray-700'>
434+
<div className='block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-200'>
422435
<button
423436
onClick={toggleFrameworkDropdown}
424-
className='flex w-full items-center justify-between'
437+
className='flex w-full items-center justify-between hover:text-modern-purple dark:text-gray-200'
438+
style={{ color: 'var(--fc-primary)' }}
425439
>
426440
<span>Frameworks</span>
427441
<svg
@@ -444,7 +458,8 @@ const Header = () => {
444458
<button
445459
key={framework.name}
446460
onClick={() => navigateToFramework(framework.link)}
447-
className='block w-full py-1 text-left text-sm text-gray-600 hover:text-modern-purple'
461+
className='block w-full py-1 text-left text-sm hover:text-modern-purple dark:text-gray-200'
462+
style={{ color: 'var(--fc-primary)' }}
448463
>
449464
{framework.name}
450465
</button>
@@ -453,10 +468,11 @@ const Header = () => {
453468
)}
454469
</div>
455470

456-
<div className='block px-3 py-2 text-base font-medium text-gray-700'>
471+
<div className='block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-200'>
457472
<button
458473
onClick={toggleGitSelectionDropdown}
459-
className='flex w-full items-center justify-between'
474+
className='flex w-full items-center justify-between hover:text-modern-purple dark:text-gray-200'
475+
style={{ color: 'var(--fc-primary)' }}
460476
>
461477
<span>Git</span>
462478
<svg
@@ -479,7 +495,8 @@ const Header = () => {
479495
<button
480496
key={git.name}
481497
onClick={() => navigateToGitSelection(git.link)}
482-
className='block w-full py-1 text-left text-sm text-gray-600 hover:text-modern-purple'
498+
className='block w-full py-1 text-left text-sm hover:text-modern-purple dark:text-gray-200'
499+
style={{ color: 'var(--fc-primary)' }}
483500
>
484501
{git.name}
485502
</button>
@@ -488,10 +505,11 @@ const Header = () => {
488505
)}
489506
</div>
490507

491-
<div className='block px-3 py-2 text-base font-medium text-gray-700'>
508+
<div className='block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-200'>
492509
<button
493510
onClick={toggleRoadmapDropdown}
494-
className='flex w-full items-center justify-between'
511+
className='flex w-full items-center justify-between hover:text-modern-purple dark:text-gray-200'
512+
style={{ color: 'var(--fc-primary)' }}
495513
>
496514
<span>Roadmap</span>
497515
<svg
@@ -514,7 +532,8 @@ const Header = () => {
514532
<button
515533
key={roadmap.name}
516534
onClick={() => navigateToRoadmap(roadmap.link)}
517-
className='block w-full py-1 text-left text-sm text-gray-600 hover:text-modern-purple'
535+
className='block w-full py-1 text-left text-sm hover:text-modern-purple dark:text-gray-200'
536+
style={{ color: 'var(--fc-primary)' }}
518537
>
519538
{roadmap.name}
520539
</button>

‎styles/tailwind.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@
2121

2222
.theme-dark {
2323
--fc-primary: #ffffff;
24-
--bg-primary: #1a1a1a;
25-
--bg-secondary: #2d2d2d;
26-
--bg-hover: #3d3d3d;
24+
--bg-primary: #2d2d3d;
25+
--bg-secondary: #363646;
26+
--bg-hover: #44445c;
2727
--accent-color: #844fba;
2828
}
2929

0 commit comments

Comments
 (0)