ben7sys/web7sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

In header.html:

Browse Source 
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
This commit is contained in:
ben7sys
2024-11-15 12:09:23 +01:00
parent 944c7efeaf
commit 4f9e817d61
2 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/components/header.html
View File

@@ -7,9 +7,9 @@
</div> </div>
<nav class="nav-menu"> <nav class="nav-menu">
<a href="#intro">Start</a> <a href="/" id="start-link">Start</a>
<a href="#services">Expertise</a> <a href="/#services" id="expertise-link">Expertise</a>
<a href="#contact">Kontakt</a> <a href="/#contact" id="contact-link">Kontakt</a>
<button class="theme-toggle" aria-label="Theme Toggle"> <button class="theme-toggle" aria-label="Theme Toggle">
<i class="fas fa-moon"></i> <i class="fas fa-moon"></i>
</button> </button>
@@ -19,4 +19,11 @@
<i class="fas fa-bars"></i> <i class="fas fa-bars"></i>
</button> </button>
</div> </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> </header>

54
public/js/components.js
View File

@@ -1,5 +1,5 @@
// Custom event for when components are fully loaded // Custom event for when components are fully loaded
const COMPONENTS_LOADED_EVENT = 'componentsLoaded'; const COMPONENTS_LOADED_EVENT = new Event('componentsLoaded');
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Helper function to handle component loading // Helper function to handle component loading
@@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', function() {
]).then(results => { ]).then(results => {
if (results.every(Boolean)) { if (results.every(Boolean)) {
// Dispatch custom event when all components are loaded // Dispatch custom event when all components are loaded
document.dispatchEvent(new CustomEvent(COMPONENTS_LOADED_EVENT)); document.dispatchEvent(COMPONENTS_LOADED_EVENT);
} }
}).catch(error => { }).catch(error => {
console.warn('Error loading components:', error); console.warn('Error loading components:', error);
@@ -68,33 +68,35 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
} }
// Scroll behavior // Scroll behavior - only enable on index page
let lastScrollTop = 0; if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
let scrollTimeout; let lastScrollTop = 0;
let scrollTimeout;
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
if (scrollTimeout) { if (scrollTimeout) {
window.cancelAnimationFrame(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 scrollTimeout = window.requestAnimationFrame(() => {
if (scrollTop > lastScrollTop) { const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
header.style.transform = 'translateY(-100%)';
} else {
header.style.transform = 'translateY(0)';
}
lastScrollTop = scrollTop; // Don't hide header when near top of page
}); if (scrollTop < 100) {
}, { passive: true }); 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 });
}
} }
}); });