forked from React-Group/interstellar_ai
85 lines
3 KiB
TypeScript
85 lines
3 KiB
TypeScript
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 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;
|