トランスペアレントナビゲーション

1"use client";
2
3import { useState } from "react";
4import Link from "next/link";
5
6export function NavigationTransparent001() {
7  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
8
9  const navLinks = [
10    { label: "サービス", href: "#" },
11    { label: "事例紹介", href: "#" },
12    { label: "会社概要", href: "#" },
13    { label: "お知らせ", href: "#" },
14  ];
15
16  return (
17    <header className="relative z-50 w-full">
18      {/* 背景グラデーション（プレビュー用） */}
19      <div className="absolute inset-0 h-64 bg-gradient-to-b from-foreground/5 to-transparent" />
20
21      <nav className="relative mx-auto flex max-w-7xl items-center justify-between px-4 py-5 sm:px-6 lg:px-8">
22        {/* ロゴ */}
23        <Link href="#" className="flex items-center gap-3">
24          <div className="flex h-8 w-8 items-center justify-center">
25            <div className="h-1.5 w-1.5 rounded-full bg-foreground" />
26          </div>
27          <span className="text-sm font-medium uppercase tracking-[0.2em] text-foreground">
28            Studio
29          </span>
30        </Link>
31
32        {/* デスクトップナビゲーション */}
33        <div className="hidden items-center gap-1 md:flex">
34          {navLinks.map((link) => (
35            <Link
36              key={link.label}
37              href={link.href}
38              className="rounded-full px-4 py-2 text-xs font-medium uppercase tracking-[0.15em] text-muted-foreground transition-all duration-300 hover:bg-foreground/5 hover:text-foreground"
39            >
40              {link.label}
41            </Link>
42          ))}
43        </div>
44
45        {/* CTA */}
46        <div className="hidden items-center gap-6 md:flex">
47          <Link
48            href="#"
49            className="text-xs font-medium uppercase tracking-[0.15em] text-muted-foreground transition-colors duration-300 hover:text-foreground"
50          >
51            ログイン
52          </Link>
53          <Link
54            href="#"
55            className="rounded-full border border-border px-5 py-2 text-xs font-medium uppercase tracking-[0.15em] text-foreground transition-all duration-300 hover:bg-foreground hover:text-background"
56          >
57            お問い合わせ
58          </Link>
59        </div>
60
61        {/* モバイルメニューボタン */}
62        <button
63          className="rounded-full p-2 text-muted-foreground transition-colors duration-200 hover:text-foreground md:hidden"
64          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
65        >
66          <svg
67            className="h-5 w-5"
68            fill="none"
69            stroke="currentColor"
70            viewBox="0 0 24 24"
71          >
72            {mobileMenuOpen ? (
73              <path
74                strokeLinecap="round"
75                strokeLinejoin="round"
76                strokeWidth={1.5}
77                d="M6 18L18 6M6 6l12 12"
78              />
79            ) : (
80              <path
81                strokeLinecap="round"
82                strokeLinejoin="round"
83                strokeWidth={1.5}
84                d="M4 8h16M4 16h16"
85              />
86            )}
87          </svg>
88        </button>
89      </nav>
90
91      {/* モバイルメニュー */}
92      {mobileMenuOpen && (
93        <div className="absolute inset-x-0 top-full mx-4 rounded-2xl border border-border bg-background/95 px-6 py-8 shadow-sm backdrop-blur-xl md:hidden">
94          <div className="flex flex-col gap-1">
95            {navLinks.map((link) => (
96              <Link
97                key={link.label}
98                href={link.href}
99                className="rounded-lg px-3 py-3 text-sm font-medium tracking-wide text-muted-foreground transition-colors duration-200 hover:bg-muted hover:text-foreground"
100              >
101                {link.label}
102              </Link>
103            ))}
104          </div>
105          <div className="mt-6 h-px bg-border/40" />
106          <div className="mt-6 flex flex-col gap-3">
107            <Link
108              href="#"
109              className="rounded-lg px-3 py-2.5 text-center text-sm font-medium tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
110            >
111              ログイン
112            </Link>
113            <Link
114              href="#"
115              className="rounded-full border border-border bg-foreground px-4 py-2.5 text-center text-sm font-medium tracking-wide text-background"
116            >
117              お問い合わせ
118            </Link>
119          </div>
120        </div>
121      )}
122    </header>
123  );
124}