55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { usePathname } from 'next/navigation';
|
||
|
|
import { useState } from 'react';
|
||
|
|
|
||
|
|
export default function Navbar() {
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const pathname = usePathname();
|
||
|
|
|
||
|
|
const links = [
|
||
|
|
{ href: '/', label: 'درباره' },
|
||
|
|
{ href: '/services', label: 'خدمات' },
|
||
|
|
{ href: '/blog', label: 'بلاگ' },
|
||
|
|
{ href: '/contact', label: 'تماس' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const linkClass = (href: string) =>
|
||
|
|
pathname === href ? ' text-red-500 font-semibold' : 'text-gray-500';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="bg-transparent px-4 py-3 w-full">
|
||
|
|
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||
|
|
<Link href="/" className="text-xl font-bold ">لوگو</Link>
|
||
|
|
|
||
|
|
<ul className="hidden md:flex space-x-6">
|
||
|
|
{links.map(({ href, label }) => (
|
||
|
|
<li key={href}>
|
||
|
|
<Link href={href} className={`${linkClass(href)} hover:text-primary-light `}>
|
||
|
|
{label}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<button className="md:hidden text-gray-700" onClick={() => setOpen(!open)}>
|
||
|
|
{open ? <p>x</p> : <p>menu</p>}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{open && (
|
||
|
|
<ul className="md:hidden mt-2 space-y-2 px-2">
|
||
|
|
{links.map(({ href, label }) => (
|
||
|
|
<li key={href}>
|
||
|
|
<Link href={href} className={linkClass(href)} onClick={() => setOpen(false)}>
|
||
|
|
{label}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|