-
Notifications
You must be signed in to change notification settings - Fork 85
Expand file tree
/
Copy pathNavbar.tsx
More file actions
88 lines (80 loc) · 2.84 KB
/
Copy pathNavbar.tsx
File metadata and controls
88 lines (80 loc) · 2.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
"use client";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
const NAV_LINKS = [
{ label: "Men", href: "/products?gender=men" },
{ label: "Women", href: "/products?gender=women" },
{ label: "Kids", href: "/products?gender=unisex" },
{ label: "Collections", href: "/collections" },
{ label: "Contact", href: "/contact" },
] as const;
export default function Navbar() {
const [open, setOpen] = useState(false);
return (
<header className="sticky top-0 z-50 bg-light-100">
<nav
className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"
aria-label="Primary"
>
<Link href="/" aria-label="Nike Home" className="flex items-center">
<Image src="/logo.svg" alt="Nike" width={28} height={28} priority className="invert" />
</Link>
<ul className="hidden items-center gap-8 md:flex">
{NAV_LINKS.map((l) => (
<li key={l.href}>
<Link
href={l.href}
className="text-body text-dark-900 transition-colors hover:text-dark-700"
>
{l.label}
</Link>
</li>
))}
</ul>
<div className="hidden items-center gap-6 md:flex">
<button className="text-body text-dark-900 transition-colors hover:text-dark-700">
Search
</button>
<button className="text-body text-dark-900 transition-colors hover:text-dark-700">
My Cart (2)
</button>
</div>
<button
type="button"
className="inline-flex items-center justify-center rounded-md p-2 md:hidden"
aria-controls="mobile-menu"
aria-expanded={open}
onClick={() => setOpen((v) => !v)}
>
<span className="sr-only">Toggle navigation</span>
<span className="mb-1 block h-0.5 w-6 bg-dark-900"></span>
<span className="mb-1 block h-0.5 w-6 bg-dark-900"></span>
<span className="block h-0.5 w-6 bg-dark-900"></span>
</button>
</nav>
<div
id="mobile-menu"
className={`border-t border-light-300 md:hidden ${open ? "block" : "hidden"}`}
>
<ul className="space-y-2 px-4 py-3">
{NAV_LINKS.map((l) => (
<li key={l.href}>
<Link
href={l.href}
className="block py-2 text-body text-dark-900 hover:text-dark-700"
onClick={() => setOpen(false)}
>
{l.label}
</Link>
</li>
))}
<li className="flex items-center justify-between pt-2">
<button className="text-body">Search</button>
<button className="text-body">My Cart (2)</button>
</li>
</ul>
</div>
</header>
);
}