class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Mobile menu functionality
const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
const navLinks = this.shadowRoot.getElementById('navLinks');
mobileMenuBtn.addEventListener('click', () => {
navLinks.classList.toggle('open');
});
// Close menu when link is clicked
this.shadowRoot.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('open');
});
});
}
}
customElements.define('custom-navbar', CustomNavbar);