オーバーレイナビゲーション

1"use client";
2
3import { useState } from "react";
4import Link from "next/link";
5
6export function NavigationOverlay001() {
7  const [menuOpen, setMenuOpen] = useState(false);
8
9  const navLinks = [
10    { label: "サービス", href: "#", description: "提供するソリューション" },
11    { label: "プロジェクト", href: "#", description: "制作実績の紹介" },
12    { label: "チーム", href: "#", description: "メンバー紹介" },
13    { label: "ブログ", href: "#", description: "最新の知見と情報" },
14    { label: "お問い合わせ", href: "#", description: "ご相談はこちら" },
15  ];
16
17  const socialLinks = [
18    { label: "Twitter", href: "#" },
19    { label: "GitHub", href: "#" },
20    { label: "LinkedIn", href: "#" },
21  ];
22
23  return (
24    <>
25      <header className="sticky top-0 z-50 w-full bg-background/80 backdrop-blur-sm">
26        <nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-5 sm:px-6 lg:px-8">
27          <Link
28            href="#"
29            className="text-lg font-medium tracking-wide text-foreground"
30          >
31            Atelier
32          </Link>
33
34          <div className="hidden items-center gap-10 md:flex">
35            {navLinks.slice(0, 3).map((link) => (
36              <Link
37                key={link.label}
38                href={link.href}
39                className="text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
40              >
41                {link.label}
42              </Link>
43            ))}
44          </div>
45
46          <button
47            onClick={() => setMenuOpen(true)}
48            className="flex items-center gap-2 text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
49          >
50            <span className="hidden sm:inline">メニュー</span>
51            <div className="flex flex-col gap-1.5">
52              <div className="h-px w-5 bg-current" />
53              <div className="h-px w-3.5 bg-current" />
54            </div>
55          </button>
56        </nav>
57      </header>
58
59      {menuOpen && (
60        <div className="fixed inset-0 z-[100] bg-background">
61          <div className="flex h-full flex-col">
62            {/* オーバーレイヘッダー */}
63            <div className="mx-auto flex w-full max-w-7xl items-center justify-between px-4 py-5 sm:px-6 lg:px-8">
64              <Link
65                href="#"
66                className="text-lg font-medium tracking-wide text-foreground"
67              >
68                Atelier
69              </Link>
70              <button
71                onClick={() => setMenuOpen(false)}
72                className="flex items-center gap-2 text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
73              >
74                <span className="hidden sm:inline">閉じる</span>
75                <svg
76                  className="h-5 w-5"
77                  fill="none"
78                  stroke="currentColor"
79                  viewBox="0 0 24 24"
80                >
81                  <path
82                    strokeLinecap="round"
83                    strokeLinejoin="round"
84                    strokeWidth={1.5}
85                    d="M6 18L18 6M6 6l12 12"
86                  />
87                </svg>
88              </button>
89            </div>
90
91            {/* ナビゲーションリンク */}
92            <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col justify-center px-4 sm:px-6 lg:px-8">
93              <div className="space-y-0 divide-y divide-border/30">
94                {navLinks.map((link, index) => (
95                  <a
96                    key={link.label}
97                    href={link.href}
98                    className="group flex items-baseline justify-between py-6 sm:py-8"
99                  >
100                    <div className="flex items-baseline gap-4 sm:gap-6">
101                      <span className="text-[10px] tracking-[0.2em] text-muted-foreground/40">
102                        {String(index + 1).padStart(2, "0")}
103                      </span>
104                      <span className="text-2xl font-medium tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground sm:text-3xl lg:text-4xl">
105                        {link.label}
106                      </span>
107                    </div>
108                    <span className="hidden text-xs font-light tracking-wide text-muted-foreground/50 transition-colors duration-200 group-hover:text-muted-foreground sm:block">
109                      {link.description}
110                    </span>
111                  </a>
112                ))}
113              </div>
114            </div>
115
116            {/* フッター */}
117            <div className="mx-auto w-full max-w-7xl px-4 pb-8 sm:px-6 lg:px-8">
118              <div className="h-px bg-border/30" />
119              <div className="mt-6 flex items-center justify-between">
120                <div className="flex items-center gap-6">
121                  {socialLinks.map((link) => (
122                    <a
123                      key={link.label}
124                      href={link.href}
125                      className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/50 transition-colors duration-200 hover:text-foreground"
126                    >
127                      {link.label}
128                    </a>
129                  ))}
130                </div>
131                <p className="text-[10px] tracking-[0.15em] text-muted-foreground/30">
132                  &copy; 2024 Atelier
133                </p>
134              </div>
135            </div>
136          </div>
137        </div>
138      )}
139    </>
140  );
141}