Navbar not working when collapsed for small screen

[diramazioni]

When the page is shown on small width screen the Navbar is collapsed, but clicking on it doesn't reveal the contents. I think it's a pretty vital fix to make it usable on mobile

[PaulBratslavsky]

@diramazioni Thank you. That still needs to be implemented. Will add it to the todo list.

[diramazioni]

Considering that I'm new to Next.js and Tailwindcss (with a little help of GPT) I was able to make it work please review it: Navbar.tsx

"use client";
import Logo from "./Logo";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from 'react';

interface NavLink {
  id: number;
  url: string;
  newTab: boolean;
  text: string;
}

function NavLink({ url, text }: NavLink) {
  const path = usePathname().replace(/^\/\w+/, '');
  const isActive = path === url;
  if (isActive) {
    return (
      <li className="flex">
        <span
          className={`flex items-center mx-4 -mb-1 border-b-2 dark:border-transparent dark:text-teal-400 dark:border-teal-400`}
        >
          {text}
        </span>
        </li>
    );
  }        
  return (
    <li className="flex">
      <Link
        href={url}
        className={`flex items-center mx-4 -mb-1 dark:border-transparent}`}
      >
        {text}
      </Link>
    </li>
  );
}

export default function Navbar({
  links,
  logoUrl,
  logoText,
}: {
  links: Array<NavLink>;
  logoUrl: string | null;
  logoText: string | null;
}) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };
  return (
    <div className="p-4 bg-col dark:text-gray-100">
      <div className="container flex justify-between h-16 mx-auto px-0 sm:px-6">
        <Logo src={logoUrl}>
          {logoText && <h2 className="text-2xl font-bold">{logoText}</h2>}
        </Logo>

        <div className="items-center flex-shrink-0 hidden lg:flex">
          <ul className="items-stretch hidden space-x-3 lg:flex">
            {links.map((item: NavLink) => (
              <NavLink key={item.id} {...item} />
            ))}
          </ul>
        </div>
      <div className="relative lg:hidden">      
        <button className="p-4"  onClick={toggleMenu}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            className="w-6 h-6 dark:text-gray-100"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M4 6h16M4 12h16M4 18h16"
            ></path>
          </svg>
        </button>
        {isMenuOpen && (
          <ul className="absolute mt-2 py-2 w-30 bg-col rounded-md shadow-lg">
            {links.map((item: NavLink) => (
              <NavLink key={item.id} {...item} />
            ))}
          </ul>
        )}        
      </div>
      </div>
    </div>
  );
}

(don't look at the background I'm experimenting with different colors and this will be the subject of other issues)

One note: I've attempted to fix the fact that path was != url because the locale was present in the path: const path = usePathname().replace(/^\/\w+/, ''); I don't know if there is a better way...

[AnasGamal]

In pull request #62, I have included the necessary implementation to enhance the codebase.

To achieve cleaner icon importing, I have utilized the '@heroicons/react' library, an official tailwindcss library. This approach replaces the inline SVG method.

Furthermore, for the mobile menu modal functionality, I have employed the '@headlessui/react' library. This library, being an official tailwindcss component library, provides a convenient solution for creating the modal.

This is what it looks like:

[PaulBratslavsky]

Thank you all I am closing this issue since I merged @AnasGamal code that implement the mobile menu.