class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Mobile Menu Logic
const menuToggle = this.shadowRoot.getElementById('menuToggle');
const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
const navDemoBtn = this.shadowRoot.getElementById('navDemoBtn');
menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('open');
});
// Demo button click handler
const handleDemoClick = (e) => {
e.preventDefault();
// Access via window to ensure visibility from Shadow DOM
if (window.openModal && typeof window.openModal === 'function') {
window.openModal('demo-modal');
}
};
navDemoBtn.addEventListener('click', handleDemoClick);
// Also handle mobile demo button
const mobileDemoBtn = this.shadowRoot.querySelector('.mobile-menu .nav-cta');
if (mobileDemoBtn) {
mobileDemoBtn.addEventListener('click', handleDemoClick);
}
// Re-initialize feather icons for the shadow DOM
if (typeof feather !== 'undefined') {
feather.replace();
}
}
}
customElements.define('custom-navbar', CustomNavbar);