"use client"; import Link from "next/link"; import { RiMenu2Fill } from "react-icons/ri"; import { FaChevronDown, FaChevronUp } from "react-icons/fa"; import { useState, useEffect, useRef } from "react"; import { usePathname } from "next/navigation"; function NavigationBar() { const [visible, setVisible] = useState(false); const [dropdownVisible, setDropdownVisible] = useState(null); const path = usePathname(); const navRef = useRef(); const hamburgerRef = useRef(); const toggleMenu = () => { setVisible(!visible); }; const showDropdown = (index) => { setDropdownVisible(index); }; const hideDropdown = () => { setDropdownVisible(null); }; useEffect(() => { setVisible(false); setDropdownVisible(null); // Close any open dropdowns window.scrollTo(0, 0); }, [path]); useEffect(() => { const handleOutsideClick = (event) => { if ( navRef.current && !navRef.current.contains(event.target) && !hamburgerRef.current.contains(event.target) ) { setVisible(false); setDropdownVisible(null); // Close any open dropdowns } }; document.addEventListener("mousedown", handleOutsideClick); return () => { document.removeEventListener("mousedown", handleOutsideClick); }; }, []); const navLinks = [ ["Home", "/#", []], [ "Team", "/#", [ ["Our Mission", "/mission"], ["Our Values", "/values"], ], ], [ "Projects", "/#", [ ["Ongoing", "/ongoing-projects"], ["Completed", "/completed-projects"], ], ], ["Reports", "/#", []], ]; return (

showDropdown(index)} onMouseLeave={hideDropdown} >
{title} {dropdownLinks.length > 0 && ( {dropdownVisible === index ? ( ) : ( )} )}
{dropdownLinks.length > 0 && (
- {subTitle}
)}

); } export default NavigationBar;

Components

Navigation Bar Dropdown Component