From 304920150486d4b8fbe8ec23aab7ad1fc608ef82 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Fri, 11 Oct 2024 09:58:51 +0200
Subject: [PATCH] Header comments

---
 app/components/Header.tsx | 59 ++++++++++++++++++++++-----------------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index e477a80..3d26f4d 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -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