This repository has no description
add navbar dropdown organization
author
damedotblog
date
(Feb 27, 2025, 7:18 PM -0500)
commit
e8d35a3b
e8d35a3b6656ba97293bbe58119971ebd20debea
parent
07732124
07732124e2465ff0c74a38cd860ffc149349c515
+175
-13
2 changed files
src
components
Navbar
+118
src/components/Navbar/Navbar.css
+118
src/components/Navbar/Navbar.css
···
268
268
margin-left: 10.2px;
269
269
}
270
270
271
271
+
/* Dropdown Menu Styles */
272
272
+
.dropdown-container {
273
273
+
position: relative;
274
274
+
}
275
275
+
276
276
+
.dropdown-trigger {
277
277
+
position: relative;
278
278
+
display: inline-block;
279
279
+
padding-right: 20px; /* Space for the arrow indicator */
280
280
+
}
281
281
+
282
282
+
.dropdown-trigger::after {
283
283
+
content: '▼';
284
284
+
font-size: 0.6em;
285
285
+
position: absolute;
286
286
+
right: 0;
287
287
+
top: 50%;
288
288
+
transform: translateY(-50%);
289
289
+
transition: transform 0.2s ease;
290
290
+
}
291
291
+
292
292
+
.dropdown-container:hover .dropdown-trigger::after {
293
293
+
transform: translateY(-50%) rotate(180deg);
294
294
+
}
295
295
+
296
296
+
.dropdown-menu {
297
297
+
position: absolute;
298
298
+
top: 100%;
299
299
+
left: 0;
300
300
+
background-color: var(--navbar-bg);
301
301
+
border: 1px solid var(--card-border);
302
302
+
border-radius: 4px;
303
303
+
min-width: 180px;
304
304
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
305
305
+
z-index: 1000;
306
306
+
padding: 8px 0;
307
307
+
margin-top: 8px;
308
308
+
opacity: 0;
309
309
+
visibility: hidden;
310
310
+
transform: translateY(-10px);
311
311
+
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
312
312
+
}
313
313
+
314
314
+
.dropdown-container:hover .dropdown-menu {
315
315
+
opacity: 1;
316
316
+
visibility: visible;
317
317
+
transform: translateY(0);
318
318
+
}
319
319
+
320
320
+
.dropdown-menu li {
321
321
+
margin: 0 !important;
322
322
+
padding: 0;
323
323
+
}
324
324
+
325
325
+
.dropdown-menu li a {
326
326
+
display: block;
327
327
+
padding: 8px 16px;
328
328
+
color: var(--text);
329
329
+
text-decoration: none;
330
330
+
transition: background-color 0.2s ease;
331
331
+
white-space: nowrap;
332
332
+
}
333
333
+
334
334
+
.dropdown-menu li a:hover {
335
335
+
background-color: rgba(59, 154, 248, 0.1);
336
336
+
color: #3B9AF8;
337
337
+
}
338
338
+
339
339
+
/* Dark mode adjustments for dropdown */
340
340
+
.dark-mode .dropdown-menu {
341
341
+
background-color: var(--navbar-bg);
342
342
+
border-color: var(--card-border);
343
343
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
344
344
+
}
345
345
+
346
346
+
.dark-mode .dropdown-menu li a:hover {
347
347
+
background-color: rgba(59, 154, 248, 0.2);
348
348
+
color: #66b2ff;
349
349
+
}
350
350
+
351
351
+
/* Responsive Adjustments for Dropdown */
352
352
+
@media (max-width: 940px) {
353
353
+
.dropdown-menu {
354
354
+
position: static;
355
355
+
display: none;
356
356
+
box-shadow: none;
357
357
+
border: none;
358
358
+
min-width: auto;
359
359
+
width: 100%;
360
360
+
margin-top: 5px;
361
361
+
padding: 5px 0;
362
362
+
background-color: transparent;
363
363
+
transform: none;
364
364
+
}
365
365
+
366
366
+
.dropdown-container:hover .dropdown-menu {
367
367
+
display: block;
368
368
+
opacity: 1;
369
369
+
visibility: visible;
370
370
+
transform: none;
371
371
+
}
372
372
+
373
373
+
.dropdown-menu li a {
374
374
+
padding: 5px 10px;
375
375
+
text-align: center;
376
376
+
}
377
377
+
378
378
+
.dropdown-trigger::after {
379
379
+
position: static;
380
380
+
margin-left: 5px;
381
381
+
transform: none;
382
382
+
}
383
383
+
384
384
+
.dropdown-container:hover .dropdown-trigger::after {
385
385
+
transform: rotate(180deg);
386
386
+
}
387
387
+
}
388
388
+
271
389
/* Responsive Design: Links display in a row under the logo */
272
390
@media (max-width: 940px) {
273
391
.navbar-container {
+57
-13
src/components/Navbar/Navbar.js
+57
-13
src/components/Navbar/Navbar.js
···
1
1
-
import React, { useContext } from 'react';
1
1
+
import React, { useContext, useState } from 'react';
2
2
import { Link, useNavigate } from 'react-router-dom';
3
3
import { ThemeContext } from '../../contexts/ThemeContext';
4
4
import './Navbar.css';
5
5
6
6
+
// Dropdown Menu Component
7
7
+
const DropdownMenu = ({ title, path, items }) => {
8
8
+
const [isHovered, setIsHovered] = useState(false);
9
9
+
10
10
+
return (
11
11
+
<li
12
12
+
className="dropdown-container"
13
13
+
onMouseEnter={() => setIsHovered(true)}
14
14
+
onMouseLeave={() => setIsHovered(false)}
15
15
+
>
16
16
+
<Link to={path} className="dropdown-trigger">{title}</Link>
17
17
+
{isHovered && (
18
18
+
<ul className="dropdown-menu">
19
19
+
{items.map((item, index) => (
20
20
+
<li key={index}>
21
21
+
<Link to={item.path}>{item.title}</Link>
22
22
+
</li>
23
23
+
))}
24
24
+
</ul>
25
25
+
)}
26
26
+
</li>
27
27
+
);
28
28
+
};
29
29
+
6
30
const Navbar = () => {
7
31
const { isDarkMode, toggleDarkMode } = useContext(ThemeContext);
8
32
const navigate = useNavigate();
9
33
34
34
+
// Define dropdown menus structure
35
35
+
const scoreDropdown = {
36
36
+
title: "score",
37
37
+
path: "/",
38
38
+
items: [
39
39
+
{ title: "score", path: "/" },
40
40
+
{ title: "compare", path: "/compare" },
41
41
+
{ title: "leaderboard", path: "/leaderboard" },
42
42
+
{ title: "alt text rating", path: "/alt-text" },
43
43
+
{ title: "shortcut", path: "/shortcut" }
44
44
+
]
45
45
+
};
46
46
+
47
47
+
const aboutDropdown = {
48
48
+
title: "about",
49
49
+
path: "/about",
50
50
+
items: [
51
51
+
{ title: "about", path: "/about" },
52
52
+
{ title: "methodology", path: "/methodology" },
53
53
+
{ title: "definitions", path: "/definitions" }
54
54
+
]
55
55
+
};
56
56
+
10
57
return (
11
58
<header className="navbar">
12
59
<div className="navbar-container">
···
23
70
</div>
24
71
<nav className="navbar-links">
25
72
<ul>
26
26
-
<li><Link to="/">score</Link></li>
27
27
-
<li><Link to="/compare">compare</Link></li>
28
28
-
<li><Link to="/leaderboard">leaderboard</Link></li>
73
73
+
<DropdownMenu {...scoreDropdown} />
29
74
<li><Link to="/resources">resources</Link></li>
30
30
-
<li><Link to="/alt-text">alt text</Link></li>
31
31
-
<li><Link to="/about">about</Link></li>
75
75
+
<DropdownMenu {...aboutDropdown} />
32
76
</ul>
33
77
</nav>
34
78
</div>
···
67
111
</svg>
68
112
</button>
69
113
<div className="navbar-support-button-container">
70
70
-
<button
71
71
-
className="navbar-support-button"
72
72
-
type="button"
73
73
-
onClick={() => navigate(`/supporter`)}
74
74
-
>
75
75
-
become a supporter
76
76
-
</button>
114
114
+
<button
115
115
+
className="navbar-support-button"
116
116
+
type="button"
117
117
+
onClick={() => navigate(`/supporter`)}
118
118
+
>
119
119
+
become a supporter
120
120
+
</button>
77
121
</div>
78
122
</div>
79
123
</div>