Skip to content

Commit a076038

Browse files
nakatermnakaterm
committed
header を修正
1 parent 6ac15f2 commit a076038

File tree

2 files changed

+85
-37
lines changed

2 files changed

+85
-37
lines changed

‎client/src/components/Header.tsx‎

Lines changed: 81 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,91 @@
1-
import { HiOutlineHome, HiOutlineQuestionMarkCircle } from "react-icons/hi";
1+
import { useState } from "react";
2+
import { LuMenu, LuX } from "react-icons/lu";
23
import { NavLink } from "react-router";
4+
import { EXTERNAL_LINKS } from "../constants/links";
35

46
export default function Header() {
7+
const [isMenuOpen, setIsMenuOpen] = useState(false);
8+
59
return (
6-
<div className="navbar sticky top-0 left-0 z-50 bg-primary shadow-sm">
7-
<div className="px-2 font-mplus text-2xl text-white">
8-
<NavLink className="flex items-center gap-1" to="/">
9-
<img src="/logo-white.svg" alt="logo" width={24} />
10-
<span className="px-2">イツヒマ</span>
11-
<span className="text-xs">(アルファ版)</span>
12-
</NavLink>
13-
</div>
14-
<div>
15-
<div className="dropdown dropdown-end -translate-y-1/2 absolute top-1/2 right-3 transform text-gray-600">
16-
<NavLink className="btn btn-primary" to="/home">
17-
<HiOutlineHome size={24} className="text-white" />
18-
<span className="hidden md:block">ホーム</span>
10+
<header className="sticky top-0 z-50 w-full border-slate-200/60 border-b bg-white/80 backdrop-blur-md">
11+
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
12+
<div className="flex items-center gap-2">
13+
<NavLink to="/" className="flex items-center gap-2 transition-opacity hover:opacity-80">
14+
<img src="/logo.svg" alt="イツヒマ" className="h-8 w-8" />
15+
<span className="font-bold font-mplus text-slate-800 text-xl tracking-tight">イツヒマ</span>
16+
<span className="hidden rounded-full bg-slate-100 px-2 py-0.5 font-medium text-[10px] text-slate-500 sm:inline-block">
17+
アルファ版
18+
</span>
19+
</NavLink>
20+
</div>
21+
22+
<nav className="hidden items-center gap-6 md:flex">
23+
<a
24+
href={EXTERNAL_LINKS.GUIDE}
25+
target="_blank"
26+
rel="noreferrer noopener"
27+
className="font-medium text-slate-600 text-sm transition-colors hover:text-primary"
28+
>
29+
使い方
30+
</a>
31+
<NavLink to="/home" className="font-medium text-slate-600 text-sm transition-colors hover:text-primary">
32+
ホーム
33+
</NavLink>
34+
<div className="h-4 w-px bg-slate-200" />
35+
<NavLink
36+
to="/new"
37+
className="inline-flex items-center justify-center rounded-full bg-primary px-4 py-2 font-semibold text-sm text-white shadow-sm transition-all hover:bg-primary/90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
38+
>
39+
イベント作成
1940
</NavLink>
20-
<button tabIndex={0} className="btn btn-circle btn-primary" type="button">
21-
<HiOutlineQuestionMarkCircle size={28} className="text-white" />
41+
</nav>
42+
43+
<div className="flex items-center gap-2 md:hidden">
44+
<NavLink
45+
to="/new"
46+
className="inline-flex items-center justify-center rounded-full bg-primary px-3 py-1.5 font-semibold text-sm text-white shadow-sm transition-all hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
47+
>
48+
イベント作成
49+
</NavLink>
50+
<button
51+
type="button"
52+
className="rounded-md p-2 text-slate-600 hover:bg-slate-100"
53+
onClick={() => setIsMenuOpen(!isMenuOpen)}
54+
>
55+
{isMenuOpen ? <LuX className="h-6 w-6" /> : <LuMenu className="h-6 w-6" />}
2256
</button>
23-
<div className="dropdown-content z-[1] w-56 rounded-box bg-base-100 p-2 shadow">
24-
<p className="p-2 text-xs">イツヒマは現在アルファ版です。</p>
25-
{/* biome-ignore lint/a11y/noNoninteractiveTabindex: daisyUI の仕様。tabIndex を消すとモバイルで開かないなどの問題が起こる */}
26-
<ul tabIndex={0} className="menu p-0">
27-
<li>
28-
<a
29-
href="https://utcode.notion.site/1e4ca5f557bc80f2b697ca7b9342dc89?pvs=4"
30-
target="_blank"
31-
rel="noreferrer noopener"
32-
>
33-
使い方ページ (臨時)
34-
</a>
35-
</li>
36-
<li>
37-
<a href="https://forms.gle/AB6xbgKjnDv5m1nm6" target="_blank" rel="noreferrer noopener">
38-
ご意見・バグ報告
39-
</a>
40-
</li>
41-
</ul>
42-
</div>
4357
</div>
4458
</div>
45-
</div>
59+
60+
{isMenuOpen && (
61+
<div className="absolute top-16 left-0 w-full border-slate-100 border-b bg-white shadow-lg md:hidden">
62+
<div className="space-y-1 px-4 pt-2 pb-4">
63+
<NavLink
64+
to="/home"
65+
className="block rounded-md px-3 py-2 font-medium text-base text-slate-600 hover:bg-slate-50 hover:text-primary"
66+
onClick={() => setIsMenuOpen(false)}
67+
>
68+
ホーム
69+
</NavLink>
70+
<a
71+
href={EXTERNAL_LINKS.GUIDE}
72+
target="_blank"
73+
rel="noreferrer noopener"
74+
className="block rounded-md px-3 py-2 font-medium text-base text-slate-600 hover:bg-slate-50 hover:text-primary"
75+
>
76+
使い方ページ
77+
</a>
78+
<a
79+
href={EXTERNAL_LINKS.FEEDBACK}
80+
target="_blank"
81+
rel="noreferrer noopener"
82+
className="block rounded-md px-3 py-2 font-medium text-base text-slate-600 hover:bg-slate-50 hover:text-primary"
83+
>
84+
ご意見・バグ報告
85+
</a>
86+
</div>
87+
</div>
88+
)}
89+
</header>
4690
);
4791
}

‎client/src/constants/links.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const EXTERNAL_LINKS = {
2+
GUIDE: "https://utcode.notion.site/1e4ca5f557bc80f2b697ca7b9342dc89?pvs=4",
3+
FEEDBACK: "https://forms.gle/AB6xbgKjnDv5m1nm6",
4+
} as const;

0 commit comments

Comments
 (0)