pasargad/src/components/layout/navbar/index.tsx

'use client';

import images from '@/assets/images/images';
import { t } from '@/locales/translates';
import Image from 'next/image';
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: t('pages_home_title') as string },
    { href: '/about', label: t('pages_about_title') as string },
    { href: '/blog', label: t('pages_contact_title') as string },
    { href: '/contact', label: t('pages_contact_title') as string },
    { href: '/product', label: t('pages_product_title') as string },
    { href: '/project', label: t('pages_project_title') as string },
  ];

  const linkClass = (href: string) =>
    pathname === href ? ' text-red-500 font-semibold' : 'text-white';

  return (
    <nav className="bg-transparent container mx-auto py-11 shrink-0 relative z-10 ">
      <div className=" flex items-center justify-between">
        <Link href="/" className="text-xl font-bold w-auto h-12 ">
          <Image alt="logo" src={images.logo} className="w-auto h-full object-contain" />
        </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>
          ))}
          <li>
            <a className="flex gap-2 items-center" href="tel:+098123456789">
              <span>xx</span>
              <p>+098 123456789</p>
            </a>
          </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>
  );
}