import React, { useState, useRef, useEffect } from 'react'; import Login from './Login'; // Importing the Login component // Define the props for the Header component interface HeaderProps { onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Function to change views showDivs: boolean; // State to show/hide divs toggleDivs: () => void; // Function to toggle divs showHistoryModelsToggle: boolean; // State to show/hide history models showToggle: boolean; // State to show/hide toggle button } const Header: React.FC = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle, }) => { // State to manage menu open/closed state const [menuOpen, setMenuOpen] = useState(false); const dropdownRef = useRef(null); // Ref for dropdown menu const toggleRef = useRef(null); // Ref for hamburger toggle // Pages to be displayed in the navigation menu const pages: ('AI' | 'FAQ' | 'Documentation' | 'Credits')[] = ['AI', 'FAQ', 'Documentation', 'Credits']; // Function to toggle the dropdown menu state const toggleMenu = () => { setMenuOpen((prevMenuOpen) => !prevMenuOpen); }; // Function to handle view change when a menu item is clicked const handleViewChange = (page: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { onViewChange(page); // Call the onViewChange function with the selected page setMenuOpen(false); // Close the menu after selection }; // Effect to handle clicks outside the dropdown to close it useEffect(() => { const handleClickOutside = (event: MouseEvent) => { // Check if the click is outside the dropdown and toggle elements if ( dropdownRef.current && !dropdownRef.current.contains(event.target as Node) && toggleRef.current && !toggleRef.current.contains(event.target as Node) ) { setMenuOpen(false); // Close the menu if the click is outside } }; document.addEventListener('mousedown', handleClickOutside); // Listen for clicks return () => { document.removeEventListener('mousedown', handleClickOutside); // Cleanup listener on unmount }; }, []); return ( <>
{/* Show the toggle button for divs if conditions are met */} {showToggle && showHistoryModelsToggle && ( )} {/* Navigation menu */} {/* Hamburger menu toggle */}
{/* Top bar of the hamburger */} {/* Middle bar of the hamburger */} {/* Bottom bar of the hamburger */}
{/* Placeholder for AI logo or text */}
{/* Include the Login component */}
); }; export default Header; // Exporting the Header component