60 lines
2.7 KiB
TypeScript
60 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import Image from "@/components/ui/resilient-image";
|
|
import { usePathname } from "next/navigation";
|
|
import { BookOpenIcon, MenuIcon } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer";
|
|
|
|
const destinations = [
|
|
{ href: "/", label: "หน้ารวม", icon: null },
|
|
{ href: "/commission", label: "จ้างคำนวณทีม", icon: "/icon/commission.webp" },
|
|
{ href: "/stygian", label: "ไกด์ Stygian", icon: "/icon/stygian.webp" },
|
|
] as const;
|
|
|
|
export function PublicNavigation() {
|
|
const pathname = usePathname();
|
|
const isCurrent = (href: string) => href === "/" ? pathname === "/" : pathname.startsWith(href);
|
|
|
|
return <>
|
|
<nav aria-label="เมนูหลัก" className="hidden items-center gap-1 lg:flex">
|
|
{destinations.slice(1).map(({ href, label, icon }) =>
|
|
<Button key={href} variant="ghost" size="sm" nativeButton={false}
|
|
render={<Link href={href} aria-current={isCurrent(href) ? "page" : undefined} />}>
|
|
{icon ? <Image src={icon} alt="" width={24} height={24} className="size-6 object-contain" /> : null}{label}
|
|
</Button>)}
|
|
</nav>
|
|
<div className="lg:hidden">
|
|
<Drawer>
|
|
<DrawerTrigger render={<Button type="button" variant="outline" size="sm" aria-label="เปิดเมนูหลัก" />}>
|
|
<MenuIcon data-icon="inline-start" aria-hidden="true" />เมนู
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>เมนูหลัก</DrawerTitle>
|
|
<DrawerDescription>เลือกหน้าที่ต้องการดู</DrawerDescription>
|
|
</DrawerHeader>
|
|
<nav aria-label="เมนูหลักบนมือถือ" className="grid gap-1 p-4">
|
|
{destinations.map(({ href, label, icon }) =>
|
|
<DrawerClose key={href} render={<Link href={href} aria-current={isCurrent(href) ? "page" : undefined}
|
|
className="flex min-h-11 items-center gap-3 rounded-lg px-3 text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />}>
|
|
{icon ? <Image src={icon} alt="" width={20} height={20} className="size-5 object-contain" /> : <BookOpenIcon aria-hidden="true" />}{label}
|
|
{isCurrent(href) ? <span className="ml-auto text-xs text-primary">ปัจจุบัน</span> : null}
|
|
</DrawerClose>)}
|
|
</nav>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</div>
|
|
</>;
|
|
}
|