class CustomNavbar extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.render();
this.setupEventListeners();
}
render() {
this.shadowRoot.innerHTML = `
`;
// Replace feather icons after rendering
setTimeout(() => {
if (typeof feather !== 'undefined') {
feather.replace();
}
}, 100);
}
setupEventListeners() {
const mobileButton = this.shadowRoot.querySelector('.mobile-menu-button');
const navMenu = this.shadowRoot.querySelector('.nav-menu');
if (mobileButton) {
mobileButton.addEventListener('click', () => {
navMenu.classList.toggle('active');
mobileButton.innerHTML = navMenu.classList.contains('active') ?
'' :
'';
feather.replace();
});
}
// Close mobile menu when clicking outside
document.addEventListener('click', (event) => {
if (!this.contains(event.target) && navMenu.classList.contains('active')) {
navMenu.classList.remove('active');
mobileButton.innerHTML = '';
feather.replace();
}
});
}
}
}
customElements.define('custom-navbar', CustomNavbar);