37 lines
2.2 KiB
TypeScript
37 lines
2.2 KiB
TypeScript
// Genesis (docs/DESIGN.md) Navigation: sticky แถบบน 56px + backdrop-blur + เส้นแบ่ง
|
|
// ล่าง 1px — โลโก้ซ้าย / ผู้ใช้ + ออกจากระบบ ขวา (แอปหน้าเดียวต่อ context จึงไม่มี
|
|
// ลิงก์กลางจอ) ใช้เฉพาะหน้ารายการ / — หน้ากลุ่ม /groups/[typeId] เลิกใช้ตาม
|
|
// redesign 2026-09-24 (ไม่มี navbar เหลือ back link) — แทน SessionBar เดิมที่แยก
|
|
// เป็นแถบของตัวเองกลางหน้า
|
|
import Link from "next/link";
|
|
|
|
import LogoutButton from "./LogoutButton";
|
|
|
|
export default function AppNav({ userName }: { userName: string }) {
|
|
return (
|
|
// appnav: hook ของกฎ coarse 44px ให้ปุ่มในแถบนี้ (globals.css — อย่าถอด)
|
|
<header className="appnav sticky top-0 z-40 h-14 border-b border-line bg-white/80 backdrop-blur">
|
|
<div className="mx-auto flex h-full max-w-7xl items-center justify-between gap-3 px-4 sm:px-6">
|
|
{/* ชื่อแบรนด์เป็น ink ตามกฎ "น้ำเงินเฉพาะของ interactive" — tile JN น้ำเงินคือ
|
|
แบรนด์มาร์ก (สืบต่อจากหน้าสรุป/login ดั้งเดิม) ทั้งแถบเป็นลิงก์กลับหน้ารายการ */}
|
|
<Link
|
|
href="/"
|
|
className="focus-ring flex min-w-0 items-center gap-2.5 rounded-md"
|
|
>
|
|
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-xs font-bold text-white">
|
|
JN
|
|
</span>
|
|
<span className="font-display truncate text-[15px] font-bold tracking-tight text-ink">
|
|
Judge's Note
|
|
</span>
|
|
</Link>
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<p className="hidden min-w-0 truncate text-sm text-ink-soft sm:block">
|
|
{userName}
|
|
</p>
|
|
<LogoutButton />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|