YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Header comments

Browse source
This commit is contained in:
sageTheDM 2024-10-11 09:58:51 +02:00
parent 7b5b2b4d3a
commit 3049201504
1 changed files with 34 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
app/components/Header.tsx
View file

@ -1,12 +1,13 @@
import React, { useState, useRef, useEffect } from 'react';
import Login from './Login';
import Login from './Login'; // Importing the Login component
// Define the props for the Header component
interface HeaderProps {
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void;
showDivs: boolean;
toggleDivs: () => void;
showHistoryModelsToggle: boolean;
showToggle: boolean;
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<HeaderProps> = ({
@ -16,50 +17,53 @@ const Header: React.FC<HeaderProps> = ({
showHistoryModelsToggle,
showToggle,
}) => {
// State to manage menu open/closed state
const [menuOpen, setMenuOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement | null>(null);
const toggleRef = useRef<HTMLDivElement | null>(null);
const dropdownRef = useRef<HTMLDivElement | null>(null); // Ref for dropdown menu
const toggleRef = useRef<HTMLDivElement | null>(null); // Ref for hamburger toggle
// Pages that will be displayed in the menu
// Pages to be displayed in the navigation menu
const pages: ('AI' | 'FAQ' | 'Documentation' | 'Credits')[] = ['AI', 'FAQ', 'Documentation', 'Credits'];
// Toggle menu state
// Function to toggle the dropdown menu state
const toggleMenu = () => {
setMenuOpen((prevMenuOpen) => !prevMenuOpen);
};
// Handle button click
// Function to handle view change when a menu item is clicked
const handleViewChange = (page: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
onViewChange(page);
setMenuOpen(false); // Close the menu when a button is clicked
onViewChange(page); // Call the onViewChange function with the selected page
setMenuOpen(false); // Close the menu after selection
};
// Effect to handle clicks outside of the dropdown
// 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);
setMenuOpen(false); // Close the menu if the click is outside
}
};
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('mousedown', handleClickOutside); // Listen for clicks
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('mousedown', handleClickOutside); // Cleanup listener on unmount
};
}, []);
return (
<>
<header>
{/* Show the toggle button for divs if conditions are met */}
{showToggle && showHistoryModelsToggle && (
<button onClick={toggleDivs} className="nav-btn show-hide-btn">
{showDivs ? (
{showDivs ? ( // Conditional rendering of icon based on showDivs state
<>
<svg style={{ fill: "var(--text-color)" }} width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/>
@ -74,27 +78,32 @@ const Header: React.FC<HeaderProps> = ({
)}
</button>
)}
{/* Navigation menu */}
<nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}>
{pages.map(page => (
{pages.map(page => ( // Map through pages to create buttons
<button key={page} onClick={() => handleViewChange(page)} className="nav-btn">
{page}
</button>
))}
</nav>
{/* Hamburger menu toggle */}
<div ref={toggleRef} className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
<span></span>
<span></span>
<span></span>
<span></span> {/* Top bar of the hamburger */}
<span></span> {/* Middle bar of the hamburger */}
<span></span> {/* Bottom bar of the hamburger */}
</div>
<div className="header-logo">
{/* AI logo or text */}
{/* Placeholder for AI logo or text */}
</div>
<div className="login-button-container">
<Login />
<Login /> {/* Include the Login component */}
</div>
</header>
</>
);
};
export default Header;
export default Header; // Exporting the Header component