From 4f9e817d6149798c1c52bfa1bc1f84e62d9b708b Mon Sep 17 00:00:00 2001
From: ben7sys <ben@7sys.de>
Date: Fri, 15 Nov 2024 12:09:23 +0100
Subject: [PATCH] In header.html:

Added IDs to navigation links
Added script to hide expertise and contact links on non-index pages
Kept the Start link visible on all pages to return to homepage
In components.js:

Fixed the COMPONENTS_LOADED_EVENT declaration to prevent duplicate declaration error
Added condition to only enable scroll behavior on index page
Kept component loading logic but made it more robust
---
 public/components/header.html | 13 ++++++--
 public/js/components.js       | 58 ++++++++++++++++++-----------------
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/public/components/header.html b/public/components/header.html
index 5ae002d..ca93beb 100644
--- a/public/components/header.html
+++ b/public/components/header.html
@@ -7,9 +7,9 @@
         </div>
         
         <nav class="nav-menu">
-            <a href="#intro">Start</a>
-            <a href="#services">Expertise</a>
-            <a href="#contact">Kontakt</a>
+            <a href="/" id="start-link">Start</a>
+            <a href="/#services" id="expertise-link">Expertise</a>
+            <a href="/#contact" id="contact-link">Kontakt</a>
             <button class="theme-toggle" aria-label="Theme Toggle">
                 <i class="fas fa-moon"></i>
             </button>
@@ -19,4 +19,11 @@
             <i class="fas fa-bars"></i>
         </button>
     </div>
+    <script>
+        // Hide expertise and contact links on non-index pages
+        if (window.location.pathname !== '/' && window.location.pathname !== '/index.html') {
+            document.getElementById('expertise-link').style.display = 'none';
+            document.getElementById('contact-link').style.display = 'none';
+        }
+    </script>
 </header>
diff --git a/public/js/components.js b/public/js/components.js
index 28ac318..5ad5d9b 100644
--- a/public/js/components.js
+++ b/public/js/components.js
@@ -1,5 +1,5 @@
 // Custom event for when components are fully loaded
-const COMPONENTS_LOADED_EVENT = 'componentsLoaded';
+const COMPONENTS_LOADED_EVENT = new Event('componentsLoaded');
 
 document.addEventListener('DOMContentLoaded', function() {
     // Helper function to handle component loading
@@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', function() {
     ]).then(results => {
         if (results.every(Boolean)) {
             // Dispatch custom event when all components are loaded
-            document.dispatchEvent(new CustomEvent(COMPONENTS_LOADED_EVENT));
+            document.dispatchEvent(COMPONENTS_LOADED_EVENT);
         }
     }).catch(error => {
         console.warn('Error loading components:', error);
@@ -68,33 +68,35 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         }
 
-        // Scroll behavior
-        let lastScrollTop = 0;
-        let scrollTimeout;
+        // Scroll behavior - only enable on index page
+        if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
+            let lastScrollTop = 0;
+            let scrollTimeout;
 
-        window.addEventListener('scroll', () => {
-            if (scrollTimeout) {
-                window.cancelAnimationFrame(scrollTimeout);
-            }
+            window.addEventListener('scroll', () => {
+                if (scrollTimeout) {
+                    window.cancelAnimationFrame(scrollTimeout);
+                }
 
-            scrollTimeout = window.requestAnimationFrame(() => {
-                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                
-                // Don't hide header when near top of page
-                if (scrollTop < 100) {
-                    header.style.transform = 'translateY(0)';
-                    return;
-                }
-                
-                // Hide header on scroll down, show on scroll up
-                if (scrollTop > lastScrollTop) {
-                    header.style.transform = 'translateY(-100%)';
-                } else {
-                    header.style.transform = 'translateY(0)';
-                }
-                
-                lastScrollTop = scrollTop;
-            });
-        }, { passive: true });
+                scrollTimeout = window.requestAnimationFrame(() => {
+                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                    
+                    // Don't hide header when near top of page
+                    if (scrollTop < 100) {
+                        header.style.transform = 'translateY(0)';
+                        return;
+                    }
+                    
+                    // Hide header on scroll down, show on scroll up
+                    if (scrollTop > lastScrollTop) {
+                        header.style.transform = 'translateY(-100%)';
+                    } else {
+                        header.style.transform = 'translateY(0)';
+                    }
+                    
+                    lastScrollTop = scrollTop;
+                });
+            }, { passive: true });
+        }
     }
 });