73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import Link from "next/link";
|
|||
|
|
import { Menu, X, Play } from "lucide-react";
|
|||
|
|
import { Logo } from "./Logo";
|
|||
|
|
import { APP_URL, BRAND } from "@/lib/site";
|
|||
|
|
|
|||
|
|
const NAV = [
|
|||
|
|
{ href: "/#features", label: "ویژگیها" },
|
|||
|
|
{ href: "/download", label: "دانلود و نصب" },
|
|||
|
|
{ href: "/faq", label: "سوالها" },
|
|||
|
|
{ href: "/support", label: "پشتیبانی" },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export function Nav() {
|
|||
|
|
const [open, setOpen] = useState(false);
|
|||
|
|
return (
|
|||
|
|
<header className="sticky top-0 z-50 glass">
|
|||
|
|
<nav className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
|
|||
|
|
<Link href="/" className="flex items-center gap-2">
|
|||
|
|
<Logo size={34} />
|
|||
|
|
<span className="text-lg font-extrabold gold-text">{BRAND.nameFa}</span>
|
|||
|
|
</Link>
|
|||
|
|
|
|||
|
|
<div className="hidden items-center gap-6 md:flex">
|
|||
|
|
{NAV.map((n) => (
|
|||
|
|
<Link key={n.href} href={n.href} className="text-sm text-cream/80 hover:text-cream">
|
|||
|
|
{n.label}
|
|||
|
|
</Link>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<a
|
|||
|
|
href={APP_URL}
|
|||
|
|
className="hidden items-center gap-1.5 rounded-xl btn-gold px-4 py-2 text-sm sm:flex"
|
|||
|
|
>
|
|||
|
|
<Play size={16} /> بازی در مرورگر
|
|||
|
|
</a>
|
|||
|
|
<button
|
|||
|
|
className="rounded-lg p-2 text-cream md:hidden"
|
|||
|
|
onClick={() => setOpen((v) => !v)}
|
|||
|
|
aria-label="منو"
|
|||
|
|
>
|
|||
|
|
{open ? <X size={22} /> : <Menu size={22} />}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
{open && (
|
|||
|
|
<div className="border-t border-gold/10 px-4 pb-4 md:hidden">
|
|||
|
|
<div className="flex flex-col gap-1 pt-2">
|
|||
|
|
{NAV.map((n) => (
|
|||
|
|
<Link
|
|||
|
|
key={n.href}
|
|||
|
|
href={n.href}
|
|||
|
|
onClick={() => setOpen(false)}
|
|||
|
|
className="rounded-lg px-3 py-2 text-cream/85 hover:bg-navy-800"
|
|||
|
|
>
|
|||
|
|
{n.label}
|
|||
|
|
</Link>
|
|||
|
|
))}
|
|||
|
|
<a href={APP_URL} className="mt-2 flex items-center justify-center gap-1.5 rounded-xl btn-gold px-4 py-2.5">
|
|||
|
|
<Play size={16} /> بازی در مرورگر
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</header>
|
|||
|
|
);
|
|||
|
|
}
|