class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Add scroll effect
window.addEventListener('scroll', () => {
const navbar = this.shadowRoot.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
}
}
customElements.define('custom-navbar', CustomNavbar);
function toggleMobileMenu() {
const navbar = document.querySelector('custom-navbar');
const mobileMenu = navbar.shadowRoot.getElementById('mobileMenu');
mobileMenu.classList.toggle('active');
}