60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
/* NAVIGATION (SPA MODE) */
|
|
export function initNavigation() {
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
const sections = document.querySelectorAll('section');
|
|
|
|
function switchSection(targetId) {
|
|
// Update Nav State
|
|
navItems.forEach(nav => {
|
|
if (nav.dataset.target === targetId) {
|
|
nav.classList.add('active');
|
|
} else {
|
|
nav.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Update Section State
|
|
sections.forEach(sec => {
|
|
if (sec.id === targetId) {
|
|
sec.classList.add('active-section');
|
|
// Scroll to top of main area when switching
|
|
const main = document.querySelector('main');
|
|
if (main) main.scrollTop = 0;
|
|
} else {
|
|
sec.classList.remove('active-section');
|
|
}
|
|
});
|
|
}
|
|
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const targetId = item.getAttribute('data-target');
|
|
if (document.getElementById(targetId)) {
|
|
switchSection(targetId);
|
|
} else {
|
|
console.warn('Target section not found:', targetId);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Handle Hash Navigation (Deep Linking)
|
|
function handleHash() {
|
|
const hash = window.location.hash.replace('#', '');
|
|
if (hash && document.getElementById(hash)) {
|
|
switchSection(hash);
|
|
} else {
|
|
// Default to 'intro' or first active if present
|
|
const activeNav = document.querySelector('.nav-item.active');
|
|
if (activeNav) {
|
|
const target = activeNav.getAttribute('data-target');
|
|
if (target) switchSection(target);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initial Load
|
|
handleHash();
|
|
|
|
// Handle hash changes (optional, but good for UX)
|
|
window.addEventListener('hashchange', handleHash);
|
|
}
|