"use client"; import { useState, useRef, useEffect } from "react"; import Image from "next/image"; import Link from "next/link"; import styles from "./Navbar.module.css"; import logo from "../assets/logo.svg"; import menu from "../assets/menu.svg"; import close from "../assets/close.svg"; import { usePathname } from "next/navigation"; import { ChevronDownIcon } from "lucide-react"; // import { motion } from "motion/react" export default function Navbar() { const pathname = usePathname(); const [isActive, setActive] = useState("false"); const [isDropdownActive, setDropdownActive] = useState(false); function handleToggle() { setActive(!isActive); } function handleDropdownToggle() { setDropdownActive(!isDropdownActive); } function useOutsideAlerter(ref) { useEffect(() => { /** * Alert if clicked on outside of element */ function handleClickOutside(event) { if (ref.current && !ref.current.contains(event.target)) { setActive(true); } } // Bind the event listener document.addEventListener("mousedown", handleClickOutside); return () => { // Unbind the event listener on clean up document.removeEventListener("mousedown", handleClickOutside); }; }, [ref]); } const wrapperRef = useRef(null); useOutsideAlerter(wrapperRef); return ( ); }