class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Initialize user menu toggle
const userMenuButton = this.shadowRoot.getElementById('user-menu-button');
const userMenu = this.shadowRoot.getElementById('user-menu');
if (userMenuButton && userMenu) {
userMenuButton.addEventListener('click', () => {
userMenu.classList.toggle('active');
});
// Close when clicking outside
document.addEventListener('click', (e) => {
if (!this.shadowRoot.contains(e.target)) {
userMenu.classList.remove('active');
}
});
}
// Initialize mobile menu toggle
const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
feather.replace();
});
}
}
}
customElements.define('custom-navbar', CustomNavbar);