45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
// Hamburger menu
|
|
const hamburger = document.getElementById('hamburger');
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('sidebar-overlay');
|
|
|
|
hamburger.addEventListener('click', () => {
|
|
sidebar.classList.toggle('open');
|
|
overlay.classList.toggle('open');
|
|
});
|
|
|
|
overlay.addEventListener('click', () => {
|
|
sidebar.classList.remove('open');
|
|
overlay.classList.remove('open');
|
|
});
|
|
|
|
// Close sidebar on nav click (mobile)
|
|
sidebar.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
if (window.innerWidth <= 900) {
|
|
sidebar.classList.remove('open');
|
|
overlay.classList.remove('open');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Highlight active section on scroll
|
|
const sections = document.querySelectorAll('.seccion-titulo');
|
|
const navLinks = document.querySelectorAll('.sidebar-nav a[data-section]');
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
navLinks.forEach(link => link.classList.remove('active'));
|
|
const id = entry.target.id;
|
|
const activeLink = document.querySelector('.sidebar-nav a[data-section="' + id + '"]');
|
|
if (activeLink) {
|
|
activeLink.classList.add('active');
|
|
activeLink.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
|
}
|
|
}
|
|
});
|
|
}, { rootMargin: '-10% 0px -80% 0px' });
|
|
|
|
sections.forEach(section => observer.observe(section));
|