// components/layout/Navbar.tsx "use client"; import { useState, useRef, useEffect } from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { useThemeStore, themes, ThemeName } from "../../store/themeStore"; import { useCart } from "../../hooks/useCart"; import { motion, AnimatePresence } from "framer-motion"; export default function Navbar() { const pathname = usePathname(); const { currentTheme, setTheme } = useThemeStore(); const { totalItems } = useCart(); const [isMenuOpen, setIsMenuOpen] = useState(false); const [isThemeMenuOpen, setIsThemeMenuOpen] = useState(false); // Add refs for the menus const mobileMenuRef = useRef(null); const themeMenuRef = useRef(null); const themeTriggerRef = useRef(null); const themeOptions: ThemeName[] = ["forest", "retro", "ocean", "blossom"]; const navLinks = [ { name: "Home", href: "/" }, { name: "Products", href: "/products" }, { name: "Cart", href: "/cart" }, { name: "Checkout", href: "/checkout" }, ]; // Handle clicks outside the menus useEffect(() => { function handleClickOutside(event: MouseEvent) { // Close mobile menu when clicking outside if ( isMenuOpen && mobileMenuRef.current && !mobileMenuRef.current.contains(event.target as Node) ) { setIsMenuOpen(false); } // Close theme menu when clicking outside, but not when clicking the trigger button if ( isThemeMenuOpen && themeMenuRef.current && !themeMenuRef.current.contains(event.target as Node) && !themeTriggerRef.current?.contains(event.target as Node) ) { setIsThemeMenuOpen(false); } } // Add the event listener document.addEventListener("mousedown", handleClickOutside); // Clean up the event listener return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [isMenuOpen, isThemeMenuOpen]); return ( ); }