ミニマルナビゲーション

1"use client";
2
3import { useState } from "react";
4import Link from "next/link";
5
6export function NavigationMinimal001() {
7  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
8
9  const navLinks = [
10    { label: "Work", href: "#" },
11    { label: "About", href: "#" },
12    { label: "Contact", href: "#" },
13  ];
14
15  return (
16    <header className="sticky top-0 z-50 w-full bg-background">
17      <nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-5 sm:px-6 lg:px-8">
18        {/* Logo */}
19        <Link href="#" className="text-lg font-semibold tracking-wide text-foreground">
20          Studio
21        </Link>
22
23        {/* Desktop Navigation */}
24        <div className="hidden items-center gap-12 md:flex">
25          {navLinks.map((link) => (
26            <Link
27              key={link.label}
28              href={link.href}
29              className="text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
30            >
31              {link.label}
32            </Link>
33          ))}
34        </div>
35
36        {/* Mobile Menu Button */}
37        <button
38          className="text-muted-foreground hover:text-foreground md:hidden"
39          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
40        >
41          <svg
42            className="h-6 w-6"
43            fill="none"
44            stroke="currentColor"
45            viewBox="0 0 24 24"
46          >
47            {mobileMenuOpen ? (
48              <path
49                strokeLinecap="round"
50                strokeLinejoin="round"
51                strokeWidth={1.5}
52                d="M6 18L18 6M6 6l12 12"
53              />
54            ) : (
55              <path
56                strokeLinecap="round"
57                strokeLinejoin="round"
58                strokeWidth={1.5}
59                d="M4 6h16M4 12h16M4 18h16"
60              />
61            )}
62          </svg>
63        </button>
64      </nav>
65
66      {/* Mobile Menu */}
67      {mobileMenuOpen && (
68        <div className="bg-background px-4 pb-6 md:hidden">
69          <div className="flex flex-col gap-4 border-t border-border pt-4">
70            {navLinks.map((link) => (
71              <Link
72                key={link.label}
73                href={link.href}
74                className="text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
75              >
76                {link.label}
77              </Link>
78            ))}
79          </div>
80        </div>
81      )}
82    </header>
83  );
84}