class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Add mobile menu functionality
const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
mobileMenuButton.addEventListener('click', () => {
const isHidden = mobileMenu.classList.contains('hidden');
if (isHidden) {
mobileMenu.classList.remove('hidden');
mobileMenuButton.innerHTML = '';
} else {
mobileMenu.classList.add('hidden');
mobileMenuButton.innerHTML = '';
}
feather.replace();
});
// Close mobile menu when clicking outside
document.addEventListener('click', (event) => {
if (!this.contains(event.target) && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
mobileMenuButton.innerHTML = '';
feather.replace();
}
});
}
}
customElements.define('custom-navbar', CustomNavbar);