compro-mit/src/components/navbar.tsx

"use client";
import Image from "next/image";
import Logo from "@/image/Logo.svg";
import { ListIcon, XIcon } from "@phosphor-icons/react/dist/ssr";
import Link from "next/link";
import { useState, useEffect } from "react";
import { usePathname } from "next/navigation";

export default function Navbar() {
  const [open, setOpen] = useState(false);
  const [activeSection, setActiveSection] = useState("");
  const pathname = usePathname();
  const isContact = pathname === "/contact";
  const active = isContact ? "contact" : activeSection;

  const menu = [
    { label: "About Us", url: "/#about-us", id: "about-us" },
    { label: "Services", url: "/#services", id: "services" },
    { label: "Portfolio", url: "/#portfolio", id: "portfolio" },
    { label: "Process", url: "/#process", id: "process" },
    { label: "Contact", url: "/contact", id: "contact" },
  ];

  useEffect(() => {
    if (isContact) return;
    const ids = ["about-us", "services", "portfolio", "process"];
    const sections = ids.map((id) => document.getElementById(id)).filter(Boolean) as HTMLElement[];
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) setActiveSection(entry.target.id);
        });
      },
      { rootMargin: "-50% 0px -50% 0px" }
    );
    sections.forEach((section) => observer.observe(section));
    return () => observer.disconnect();
  }, [isContact]);

  return (
    <>
      <div className="bg-white px-4 h-19.5 md:h-18.5 flex items-center w-full justify-between md:py-5.5 md:px-16 sticky top-0 left-0 right-0 z-50">
        <Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
        <button onClick={() => setOpen(true)} className="md:hidden">
          <ListIcon className="size-8 text-secondary-400 cursor-pointer" />
        </button>
        <div className="md:flex gap-7.5 hidden">
          {menu?.map((item) => (
            <Link href={item.url} key={item.label}>
              <div className={`font-medium ${active === item.id ? "text-primary-800" : "text-title"}`}>{item.label}</div>
            </Link>
          ))}
        </div>
      </div>

      {open && <div className="fixed inset-0 bg-black/50 z-50 md:hidden" onClick={() => setOpen(false)} />}

      <div className={`fixed top-0 right-0 h-full w-64 bg-white z-50 transform transition-transform duration-300 md:hidden ${open ? "translate-x-0" : "translate-x-full"}`}>
        <div className="flex justify-between items-center p-4">
          <Image src={Logo} width={118} className="w-fit h-7.5" alt="logo" />
          <button onClick={() => setOpen(false)}>
            <XIcon className="size-6 text-secondary-400" />
          </button>
        </div>
        <div className="flex flex-col gap-4 p-4">
          {menu?.map((item) => (
            <Link href={item.url} key={item.label} onClick={() => setOpen(false)}>
              <div className={`font-medium ${active === item.id ? "text-primary-800" : "text-title"}`}>{item.label}</div>
            </Link>
          ))}
        </div>
      </div>
    </>
  );
}