フローティングナビゲーション

1"use client";
2
3import { useState } from "react";
4import Link from "next/link";
5
6export function NavigationFloating001() {
7  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
8
9  const navLinks = [
10    { label: "Services", href: "#" },
11    { label: "Work", href: "#" },
12    { label: "About", href: "#" },
13    { label: "Journal", href: "#" },
14  ];
15
16  return (
17    <header className="w-full bg-background">
18      <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
19        <nav className="flex items-center justify-between rounded-full border border-border/60 bg-background/80 px-6 py-3 backdrop-blur-xl">
20          {/* Logo */}
21          <Link
22            href="#"
23            className="flex items-center gap-2.5"
24          >
25            <div className="flex h-7 w-7 items-center justify-center rounded-full border border-border bg-muted">
26              <span className="text-xs font-medium text-foreground">A</span>
27            </div>
28            <span className="text-sm font-medium tracking-wide text-foreground">
29              Atelier
30            </span>
31          </Link>
32
33          {/* Desktop Navigation */}
34          <div className="hidden items-center gap-1 md:flex">
35            {navLinks.map((link) => (
36              <Link
37                key={link.label}
38                href={link.href}
39                className="rounded-full px-4 py-1.5 text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground"
40              >
41                {link.label}
42              </Link>
43            ))}
44          </div>
45
46          {/* Desktop CTA */}
47          <div className="hidden items-center gap-3 md:flex">
48            <Link
49              href="#"
50              className="text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
51            >
52              Sign in
53            </Link>
54            <Link
55              href="#"
56              className="rounded-full bg-foreground px-5 py-1.5 text-sm font-medium tracking-wide text-background transition-colors duration-200 hover:bg-foreground/90"
57            >
58              Contact
59            </Link>
60          </div>
61
62          {/* Mobile Menu Button */}
63          <button
64            className="rounded-full p-1.5 text-muted-foreground hover:text-foreground md:hidden"
65            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
66          >
67            <svg
68              className="h-5 w-5"
69              fill="none"
70              stroke="currentColor"
71              viewBox="0 0 24 24"
72            >
73              {mobileMenuOpen ? (
74                <path
75                  strokeLinecap="round"
76                  strokeLinejoin="round"
77                  strokeWidth={1.5}
78                  d="M6 18L18 6M6 6l12 12"
79                />
80              ) : (
81                <path
82                  strokeLinecap="round"
83                  strokeLinejoin="round"
84                  strokeWidth={1.5}
85                  d="M4 6h16M4 12h16M4 18h16"
86                />
87              )}
88            </svg>
89          </button>
90        </nav>
91
92        {/* Mobile Menu */}
93        {mobileMenuOpen && (
94          <div className="mt-2 rounded-2xl border border-border/60 bg-background/95 px-6 py-5 backdrop-blur-xl md:hidden">
95            <div className="space-y-1">
96              {navLinks.map((link) => (
97                <Link
98                  key={link.label}
99                  href={link.href}
100                  className="block rounded-lg px-3 py-2.5 text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground"
101                >
102                  {link.label}
103                </Link>
104              ))}
105            </div>
106            <div className="mt-4 h-px bg-border/40" />
107            <div className="mt-4 flex flex-col gap-2">
108              <Link
109                href="#"
110                className="rounded-lg px-3 py-2.5 text-center text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:bg-muted"
111              >
112                Sign in
113              </Link>
114              <Link
115                href="#"
116                className="rounded-full bg-foreground px-4 py-2.5 text-center text-sm font-medium tracking-wide text-background"
117              >
118                Contact
119              </Link>
120            </div>
121          </div>
122        )}
123      </div>
124    </header>
125  );
126}