class CustomNavigation extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Initialize Feather Icons in shadow DOM
setTimeout(() => {
if (typeof feather !== 'undefined') {
feather.replace();
}
// Add event listeners for mobile menu
const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
const closeMobileMenu = this.shadowRoot.getElementById('closeMobileMenu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.remove('hidden');
document.body.style.overflow = 'hidden';
});
}
if (closeMobileMenu && mobileMenu) {
closeMobileMenu.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
document.body.style.overflow = '';
});
}
// Close mobile menu when clicking on links
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
document.body.style.overflow = '';
});
});
}, 100);
}
}
customElements.define('custom-navigation', CustomNavigation);