web-humas-ri/components/landing-page/navbar.tsx

"use client";
import { useState } from "react";
import Link from "next/link";
import { Menu, Lock, Search } from "lucide-react";
import { Input } from "../ui/input";
import Image from "next/image";

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggleMenu = () => setIsOpen(!isOpen);

  return (
    <nav className="w-full bg-white shadow-md">
      <div className="max-w-7xl mx-auto py-3 px-4 flex flex-col md:flex-row justify-between items-center gap-4">
        <div className="flex items-center gap-4 w-full md:w-auto">
          <div className="flex-shrink-0">
            <Image
              src="/humas.jpg"
              alt="Logo"
              width={67}
              height={62}
              className="w-[67px] h-[62px] object-cover"
            />
          </div>

          <div className="flex-grow w-full max-w-md relative">
            <Input
              type="text"
              placeholder="Search..."
              className="pr-10 bg-white text-black rounded-sm w-full"
            />
            <Search className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500" />
          </div>

          <div className="hidden md:block min-w-fit whitespace-nowrap text-black font-semibold text-sm">
            Kamis, Maret 27, 2025
          </div>
        </div>

        <div className="flex items-center gap-2 text-sm whitespace-nowrap text-black font-semibold">
          <Lock className="w-4 h-4" />
          <Link href="/auth" className="hover:underline">
            Login
          </Link>
        </div>
      </div>

      <div className="bg-[#1E0060] text-white">
        <div className="max-w-7xl mx-auto flex items-center justify-between px-4 py-3">
          <button
            className="md:hidden flex items-center"
            onClick={toggleMenu}
            aria-label="Toggle menu"
          >
            <Menu className="h-6 w-6 text-white" />
          </button>

          <div className="hidden md:flex gap-6 font-semibold text-sm">
            <Link href="/" className="text-yellow-400">
              BERANDA
            </Link>
            <Link href="/category/popular" className="hover:text-yellow-400">
              TERPOPULER
            </Link>
            <Link href="/category/nusantara" className="hover:text-yellow-400">
              NUSANTARA
            </Link>
            <Link href="/category/notes" className="hover:text-yellow-400">
              CATATAN NEGERI
            </Link>
            <Link href="/category/inovation" className="hover:text-yellow-400">
              INOVASI
            </Link>
          </div>

          <div className="flex gap-4 text-white text-lg">
            <Link href="#" aria-label="Twitter">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M7.91 20.889c8.302 0 12.845-6.885 12.845-12.845c0-.193 0-.387-.009-.58A9.2 9.2 0 0 0 23 5.121a9.2 9.2 0 0 1-2.597.713a4.54 4.54 0 0 0 1.99-2.5a9 9 0 0 1-2.87 1.091A4.5 4.5 0 0 0 16.23 3a4.52 4.52 0 0 0-4.516 4.516c0 .352.044.696.114 1.03a12.82 12.82 0 0 1-9.305-4.718a4.526 4.526 0 0 0 1.4 6.03a4.6 4.6 0 0 1-2.043-.563v.061a4.524 4.524 0 0 0 3.62 4.428a4.4 4.4 0 0 1-1.189.159q-.435 0-.845-.08a4.51 4.51 0 0 0 4.217 3.135a9.05 9.05 0 0 1-5.608 1.936A9 9 0 0 1 1 18.873a12.84 12.84 0 0 0 6.91 2.016"
                />
              </svg>
            </Link>
            <Link href="#" aria-label="Instagram">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
                />
              </svg>
            </Link>
            <Link href="#" aria-label="Facebook">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
                />
              </svg>
            </Link>
            <Link href="#" aria-label="YouTube">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476zM9.999 8.5v7l6-3.5z"
                />
              </svg>
            </Link>
            <Link href="#" aria-label="LinkedIn">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  // fill-rule="evenodd"
                  d="M23.45 5.948c.166-.546 0-.948-.795-.948H20.03c-.668 0-.976.347-1.143.73c0 0-1.335 3.196-3.226 5.272c-.612.602-.89.793-1.224.793c-.167 0-.418-.191-.418-.738V5.948c0-.656-.184-.948-.74-.948H9.151c-.417 0-.668.304-.668.593c0 .621.946.765 1.043 2.513v3.798c0 .833-.153.984-.487.984c-.89 0-3.055-3.211-4.34-6.885C4.45 5.288 4.198 5 3.527 5H.9c-.75 0-.9.347-.9.73c0 .682.89 4.07 4.145 8.551C6.315 17.341 9.37 19 12.153 19c1.669 0 1.875-.368 1.875-1.003v-2.313c0-.737.158-.884.687-.884c.39 0 1.057.192 2.615 1.667C19.11 18.216 19.403 19 20.405 19h2.625c.75 0 1.126-.368.91-1.096c-.238-.724-1.088-1.775-2.215-3.022c-.612-.71-1.53-1.475-1.809-1.858c-.389-.491-.278-.71 0-1.147c0 0 3.2-4.426 3.533-5.929"
                  // clip-rule="evenodd"
                />
              </svg>
            </Link>
          </div>
        </div>

        {isOpen && (
          <div className="md:hidden px-4 pb-4 flex flex-col gap-2 font-semibold text-sm bg-[#1E0060]">
            <Link href="/" className="text-yellow-400">
              BERANDA
            </Link>
            <Link href="/terpopuler" className="hover:text-yellow-400">
              TERPOPULER
            </Link>
            <Link href="/nusantara" className="hover:text-yellow-400">
              NUSANTARA
            </Link>
            <Link href="/catatan" className="hover:text-yellow-400">
              CATATAN NEGERI
            </Link>
            <Link href="/inovasi" className="hover:text-yellow-400">
              INOVASI
            </Link>
            <Link href="/jaga" className="hover:text-yellow-400">
              JAGA INDONESIA
            </Link>
          </div>
        )}
      </div>
    </nav>
  );
};

export default Navbar;