class CooperativeHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
this.initializeMobileMenu();
this.updateActiveLink();
}
initializeMobileMenu() {
const menuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
const closeBtn = this.shadowRoot.querySelector('.mobile-menu-close');
const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
const overlay = this.shadowRoot.querySelector('.mobile-menu-overlay');
const mobileLinks = this.shadowRoot.querySelectorAll('.mobile-nav-links a');
const openMenu = () => {
mobileMenu.classList.add('active');
overlay.classList.add('active');
document.body.style.overflow = 'hidden';
};
const closeMenu = () => {
mobileMenu.classList.remove('active');
overlay.classList.remove('active');
document.body.style.overflow = '';
};
menuBtn.addEventListener('click', openMenu);
closeBtn.addEventListener('click', closeMenu);
overlay.addEventListener('click', closeMenu);
mobileLinks.forEach(link => {
link.addEventListener('click', closeMenu);
});
}
updateActiveLink() {
const currentPath = window.location.pathname;
const navLinks = this.shadowRoot.querySelectorAll('.nav-links a, .mobile-nav-links a');
navLinks.forEach(link => {
const href = link.getAttribute('href');
if (href === currentPath || (href === '/' && currentPath.endsWith('/'))) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
}
customElements.define('cooperative-header', CooperativeHeader);