gabrielkaszewski-next/components/navbar.tsx

"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu, X } from "lucide-react";

const Navbar = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  useEffect(() => {
    setIsMenuOpen(false);
  }, [pathname]);

  const navLinks = [
    { href: "/", label: "Home" },
    { href: "/k-suite", label: "K-Suite" },
    { href: "/projects", label: "Projects" },
    { href: "/movie-corner", label: "Movie Corner" },
    {
      href: "https://blog.gabrielkaszewski.dev/",
      label: "Blog",
      external: true,
    },
    { href: "/about", label: "About" },
  ];

  const baseClasses =
    "fixed z-20 flex w-full items-center justify-center p-4 transition-all duration-300";
  const scrolledClasses = "bg-gray-900/80 backdrop-blur-md";
  const transparentClasses = "bg-transparent";

  const renderLink = (link: (typeof navLinks)[number], className: string) => {
    const isActive = pathname === link.href;
    const linkClasses = `${className} hover:text-yellow-400 transition-colors ${
      isActive ? "text-yellow-400 font-semibold" : "text-white"
    }`;

    if (link.external) {
      return (
        <a
          key={link.href}
          href={link.href}
          className={linkClasses}
          target="_blank"
          rel="noopener noreferrer"
        >
          {link.label}
        </a>
      );
    }

    return (
      <Link key={link.href} href={link.href} className={linkClasses}>
        {link.label}
      </Link>
    );
  };

  return (
    <>
      <nav
        className={`${baseClasses} ${
          isScrolled || isMenuOpen ? scrolledClasses : transparentClasses
        }`}
      >
        <div className="flex flex-1"></div>

        {/* Desktop links */}
        <div className="hidden md:flex gap-4">
          {navLinks.map((link) => renderLink(link, "text-lg"))}
        </div>

        {/* Mobile hamburger */}
        <button
          onClick={() => setIsMenuOpen(!isMenuOpen)}
          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
          className="md:hidden text-white hover:text-yellow-400 transition-colors"
        >
          {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </nav>

      {/* Mobile menu */}
      {isMenuOpen && (
        <div role="dialog" aria-label="Navigation menu" className="fixed inset-0 z-10 pt-16 bg-gray-900/95 backdrop-blur-md md:hidden">
          <div className="flex flex-col items-center gap-6 pt-8">
            {navLinks.map((link) => renderLink(link, "text-2xl"))}
          </div>
        </div>
      )}
    </>
  );
};

export default Navbar;