diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 8a930e3..5a02425 100644 --- a/app/components/Header.tsx +++ b/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 = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => { - const [menuOpen, setMenuOpen] = useState(false); +const Header: React.FC = ({ + onViewChange, + showDivs, + toggleDivs, + showHistoryModelsToggle, + showToggle, +}) => { + const [menuOpen, setMenuOpen] = useState(false); + const dropdownRef = useRef(null); + const toggleRef = useRef(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 ( - <> -
-
- - - -
- -
- {/* AI logo or text */} -
-
- -
-
- - ); + // 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 ( + <> +
+ {showToggle && showHistoryModelsToggle && ( + + )} + +
+ + + +
+
+ {/* AI logo or text */} +
+
+ +
+
+ + ); }; export default Header; diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx index 9589096..fec7713 100644 --- a/app/components/InputFrontend.tsx +++ b/app/components/InputFrontend.tsx @@ -47,6 +47,7 @@ const InputFrontend = React.forwardRef( value={inputValue} onChange={handleInputChange} onKeyDown={handleKeyDown} + className='textInputField' />