Simple Navbar tailwind

import React, { useState } from "react";
import { Menu, X } from "lucide-react";

const Navbar = () => {
  const [open, setOpen] = useState(false);

  return (
    <nav className="fixed top-0 left-0 w-full bg-gray-800 shadow-lg z-50">
      <div className="mx-auto px-6 h-12 flex items-center justify-between">
        <div className="text-white font-bold text-lg">KnopersShop</div>

        <ul className="hidden md:flex gap-6 absolute left-1/2 transform -translate-x-1/2">
          <li><a className="text-red-400 hover:text-white transition" href="">Home</a></li>
          <li><a className="text-red-400 hover:text-white transition" href="">About</a></li>
          <li><a className="text-red-400 hover:text-white transition" href="">Contact</a></li>
          <li><a className="text-red-400 hover:text-white transition" href="">Products</a></li>
        </ul>

        <button
          onClick={() => setOpen(!open)}
          className="md:hidden text-white"
          aria-label="Toggle menu"
        >
          {open ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {open && (
        <div className="md:hidden bg-gray-900 px-6 py-4 flex flex-col gap-3">
          <a href="" className="text-red-400 hover:text-white transition">Home</a>
          <a href="" className="text-red-400 hover:text-white transition">About</a>
          <a href="" className="text-red-400 hover:text-white transition">Contact</a>
          <a href="" className="text-red-400 hover:text-white transition">Products</a>
        </div>
      )}
    </nav>
  );
};

export default Navbar;