79 lines
3.2 KiB
TypeScript
79 lines
3.2 KiB
TypeScript
"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 hideMenu = ["/perubahan-pricing-waba"].some((path) => pathname.includes(path));
|
|
|
|
|
|
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={hideMenu ? "hidden" : "md:hidden"}>
|
|
<ListIcon className="size-8 text-secondary-400 cursor-pointer" />
|
|
</button>
|
|
<div className={hideMenu ? "hidden" : "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={hideMenu ? "hidden" : "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>
|
|
</>
|
|
);
|
|
}
|