interstellar_ai/app/components/Header.tsx

import React, { useState, useRef, useEffect } from 'react';
import Login from './Login';

interface HeaderProps {
    onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void;
    showDivs: boolean;
    toggleDivs: () => void;
    showHistoryModelsToggle: boolean;
    showToggle: boolean;
}

const Header: React.FC<HeaderProps> = ({
    onViewChange,
    showDivs,
    toggleDivs,
    showHistoryModelsToggle,
    showToggle,
}) => {
    const [menuOpen, setMenuOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement | null>(null);
    const toggleRef = useRef<HTMLDivElement | null>(null);

    // Toggle menu state
    const toggleMenu = () => {
        setMenuOpen((prevMenuOpen) => !prevMenuOpen);
    };

    // Handle button click
    const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => {
        onViewChange(page);
        setMenuOpen(false); // Close the menu when a button is clicked
    };

    // Effect to handle clicks outside of the dropdown
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            // Check if the click is outside both the dropdown and the hamburger menu
            if (
                dropdownRef.current && 
                !dropdownRef.current.contains(event.target as Node) &&
                toggleRef.current && 
                !toggleRef.current.contains(event.target as Node)
            ) {
                setMenuOpen(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, []);

    return (
        <>
            <header>
                {showToggle && showHistoryModelsToggle && (
                    <button onClick={toggleDivs} className="nav-btn show-hide-btn">
                        {showDivs ? 'Hide' : 'Show'}
                    </button>
                )}
                <nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}>
                    <button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
                    <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
                    <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
                    <button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button>
                </nav>
                <div ref={toggleRef} className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                  <div className="header-logo">
                      {/* AI logo or text */}
                  </div>
                <div className="login-button-container">
                    <Login />
                </div>
            </header>
        </>
    );
};

export default Header;