class CustomHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Add mobile menu functionality
const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
const closeMobileMenu = this.shadowRoot.getElementById('closeMobileMenu');
const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
const overlay = document.createElement('div');
overlay.className = 'fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden';
overlay.style.display = 'none';
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.add('open');
overlay.style.display = 'block';
document.body.appendChild(overlay);
document.body.style.overflow = 'hidden';
feather.replace();
});
closeMobileMenu.addEventListener('click', () => {
mobileMenu.classList.remove('open');
overlay.style.display = 'none';
document.body.style.overflow = '';
});
overlay.addEventListener('click', () => {
mobileMenu.classList.remove('open');
overlay.style.display = 'none';
document.body.style.overflow = '';
});
// Initialize feather icons
setTimeout(() => {
feather.replace();
}, 100);
}
}
customElements.define('custom-header', CustomHeader);