class CustomNavbar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.isMenuOpen = false;
}
connectedCallback() {
this.render();
this.setupEventListeners();
}
render() {
this.shadowRoot.innerHTML = `
`;
}
setupEventListeners() {
const navbar = this.shadowRoot.getElementById('navbar');
const mobileBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
// Scroll effect
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Mobile menu toggle
mobileBtn.addEventListener('click', () => {
this.isMenuOpen = !this.isMenuOpen;
mobileMenu.classList.toggle('open', this.isMenuOpen);
// Animate hamburger to X
const svg = mobileBtn.querySelector('svg');
if (this.isMenuOpen) {
svg.innerHTML = `
`;
} else {
svg.innerHTML = `
`;
}
});
// Close mobile menu when clicking a link
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
this.isMenuOpen = false;
mobileMenu.classList.remove('open');
const svg = mobileBtn.querySelector('svg');
svg.innerHTML = `
`;
});
});
}
}
customElements.define('custom-navbar', CustomNavbar);