Responsive Navbar with Hamburger

import { useState } from "react";
export function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    <nav className="bg-slate-950 border-b border-slate-800 px-6 py-4">
      <div className="flex items-center justify-between">
        <span className="font-bold text-green-400">NexDevTeam</span>
        <button onClick={() => setOpen(o => !o)} className="md:hidden text-slate-300">
          {open ? "✕" : "☰"}
        </button>
        <ul className={`${open ? "flex" : "hidden"} md:flex gap-6 flex-col md:flex-row absolute md:static top-16 left-0 w-full md:w-auto bg-slate-950 md:bg-transparent p-4 md:p-0`}>
          <li><a href="/catalogue" className="text-slate-300 hover:text-green-400">Catalogue</a></li>
          <li><a href="/about"     className="text-slate-300 hover:text-green-400">About</a></li>
        </ul>
      </div>
    </nav>
  );
}