"use client"; import Link from 'next/link'; import Image from 'next/image'; import { Home, InfoIcon, MessageCircle, Search, FileQuestion, Menu } from 'lucide-react'; import { usePathname } from 'next/navigation'; import { useTheme } from "next-themes"; import { useEffect, useState, useRef } from "react"; import { useMedia } from 'react-use'; import useSWR from 'swr' import logo from '../../public/smart-retrieval-logo.webp' interface NavLinkProps { href: string; children: React.ReactNode; onClick?: () => void; // Include onClick as an optional prop } interface MobileMenuProps { isOpen: boolean; onClose: () => void; } const MobileMenu: React.FC = ({ isOpen, onClose }) => { const isLargeScreen = useMedia('(min-width: 1024px)', false); const menuRef = useRef(null); useEffect(() => { const handleOutsideClick = (event: MouseEvent | TouchEvent) => { if ( !isLargeScreen && isOpen && !menuRef.current?.contains(event.target as Node) && !((event.target as HTMLElement).closest('.toggle-button')) // Exclude the toggle button ) { onClose(); // Close the menu } }; if (!isLargeScreen && isOpen) { // Add event listeners for both mouse and touch events document.addEventListener('mousedown', handleOutsideClick); } return () => { // Remove the event listener when the component unmounts document.removeEventListener('mousedown', handleOutsideClick); }; }, [isLargeScreen, isOpen, onClose]); useEffect(() => { if (isLargeScreen && isOpen) { onClose(); } }, [isLargeScreen, isOpen, onClose]); return (
Logo
{/* Mobile menu content */}
Home
About
Chat
Query
Search
); }; const NavLink: React.FC = ({ href, children, onClick }) => { // Use the useRouter hook to get information about the current route const pathname = usePathname(); // Determine if the current tab is active const isActive = pathname === href; const handleClick = () => { if (onClick) { onClick(); // Call the onClick handler if provided } }; return ( {/* Add a class to highlight the active tab */}
{children}
); }; export default function Header() { const isLargeScreen = useMedia('(min-width: 1024px)', false); const [mounted, setMounted] = useState(false); const { theme, setTheme } = useTheme(); // const [apiStatus, setApiStatus] = useState(false); // Use SWR for API status fetching const healthcheck_api = process.env.NEXT_PUBLIC_HEALTHCHECK_API; const { data: apiStatus, error: apiError } = useSWR(healthcheck_api, async (url) => { try { // Fetch the data const response = await fetch(url); if (!response.ok) { throw new Error(response.statusText || 'Unknown Error'); } const data = await response.json(); return data; } catch (error: any) { console.error('Error fetching Backend API Status:', error.message); throw error; } }, { revalidateOnFocus: true, // Revalidate when the window gains focus revalidateIfStale: true, // Revalidate if the data is stale refreshInterval: 60000, // Revalidate every 60 seconds }); if (apiError) { console.error('[Header] Error fetching Backend API Status:', apiError.message); } useEffect(() => { setMounted(true); }, []); const [isMobileMenuOpen, setMobileMenuOpen] = useState(false); const toggleMobileMenu = () => { // Handle the toggle click here if (isMobileMenuOpen) { // If the menu is open, close it setMobileMenuOpen(false); } else { // If the menu is closed, open it setMobileMenuOpen(true); } }; if (!mounted) return null; return (
{/* Navigation Bar */}
); }