Header update factor 1

app/components/Header.tsx

@@ -1,54 +1,85 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Login from './Login';
 
 interface HeaderProps {
-  onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
-  showDivs: boolean;
-  toggleDivs: () => void;
-  showHistoryModelsToggle: boolean;
-  showToggle: boolean;
+    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 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);
 
-  const toggleMenu = () => {
-    setMenuOpen(!menuOpen);
-  };
+    // Toggle menu state
+    const toggleMenu = () => {
+        setMenuOpen((prevMenuOpen) => !prevMenuOpen);
+    };
 
-  const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
-    onViewChange(page);
-    toggleMenu();
-  };
+    // Handle button click
+    const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => {
+        onViewChange(page);
+        setMenuOpen(false); // Close the menu when a button is clicked
+    };
 
-  return (
-    <>
-      <header>
-        <div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
-          <span></span>
-          <span></span>
-          <span></span>
-        </div>
-        <nav 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> {/* Add Credits tab */}
-          {showToggle && showHistoryModelsToggle && (
-            <button onClick={toggleDivs} className="nav-btn">
-              {showDivs ? 'Hide History/Models' : 'Show History/Models'}
-            </button>
-          )}
-        </nav>
-        <div className="header-button header-logo">
-          {/* AI logo or text */}
-        </div>
-        <div className="login-button-container">
-          <Login /> 
-        </div>
-      </header>
-    </>
-  );
+    // 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 History/Models' : 'Show History/Models'}
+                    </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-button header-logo">
+                    {/* AI logo or text */}
+                </div>
+                <div className="login-button-container">
+                    <Login />
+                </div>
+            </header>
+        </>
+    );
 };
 
 export default Header;