TailwindCSS

'use client';
import { useState, useRef } from 'react';
import Link from 'next/link';
import { navData } from '../lib/navData';
import useClickOutside from '@/lib/useClickOutside';

export default function Nav() {
  const [subMenu, setSubMenu] = useState<string | null>(null);
  const wrapperRef = useRef(null);

  type Link = {
    title: string;
    url: string;
  };

  const handleOpenSubMega = (title: string, links: Link[]) => {
    if (subMenu === title) {
      setSubMenu(null);
    } else {
      setSubMenu(title);
    }
  };

  useClickOutside(wrapperRef, () => setSubMenu(null));

  return (
    <nav className="relative bg-kLight">
      <ul className="flex gap-4 justify-start items-center">
        <li>
          <Link href="/">
            <h1 className="text-5xl font-Space-Grotesk font-bold">Kadena</h1>
          </Link>
        </li>
        {navData.map((nav) => (
          <li key={nav.title}>
            <button onClick={() => handleOpenSubMega(nav.title, nav.links)}>
              {nav.title}
            </button>

            {/* MEGAMENU */}
            {subMenu === nav.title && (
              <nav
                ref={wrapperRef}
                className="absolute bg-white py-7 px-5 border max-w-[50rem] w-full rounded-md"
              >
                <div className="flex gap-4">
                  <div className="w-1/3">
                    <ul className="flex flex-col gap-4">
                      {nav.links.map((link) => (
                        <li key={link.title}>
                          <Link href={link.url}>{link.title}</Link>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div className="w-1/3">This is column 2</div>
                  <div className="w-1/3">This is column 3</div>
                </div>
              </nav>
            )}
          </li>
        ))}
      </ul>
    </nav>
  );
}