"use client"; import { useEffect, useState } from "react"; import { useSession, signOut } from "next-auth/react"; import Link from "next/link"; type DropdownName = | "about" | "experience" | "certification" | "services" | "account" | null; export default function Navbar() { const { data: session } = useSession(); const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const [openDropdown, setOpenDropdown] = useState(null); useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 30); }; handleScroll(); window.addEventListener("scroll", handleScroll); return () => { window.removeEventListener("scroll", handleScroll); }; }, []); // Tutup navbar dan dropdown const closeNavbar = () => { setMobileOpen(false); setOpenDropdown(null); }; // Toggle dropdown const toggleDropdown = (name: DropdownName) => { setOpenDropdown((current) => current === name ? null : name ); }; // Tutup dropdown ketika klik di luar navbar useEffect(() => { const handleClickOutside = (event: MouseEvent) => { const target = event.target as HTMLElement; if (!target.closest(".main-navbar")) { setOpenDropdown(null); } }; document.addEventListener( "mousedown", handleClickOutside ); return () => { document.removeEventListener( "mousedown", handleClickOutside ); }; }, []); return ( ); }