class CustomNavbar extends HTMLElement {
constructor() {
super();
this.isMenuOpen = false;
}
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.render();
this.setupEventListeners();
}
render() {
this.shadowRoot.innerHTML = `
`;
}
setupEventListeners() {
const navbar = this.shadowRoot.getElementById('navbar');
const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
const navLinks = this.shadowRoot.getElementById('navLinks');
// Scroll effect
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Mobile menu toggle
mobileMenuBtn.addEventListener('click', () => {
this.isMenuOpen = !this.isMenuOpen;
navLinks.classList.toggle('active');
const icon = mobileMenuBtn.querySelector('i');
if (this.isMenuOpen) {
icon.setAttribute('data-feather', 'x');
} else {
icon.setAttribute('data-feather', 'menu');
}
feather.replace();
});
// Close mobile menu on link click
const links = navLinks.querySelectorAll('.nav-link');
links.forEach(link => {
link.addEventListener('click', () => {
this.isMenuOpen = false;
navLinks.classList.remove('active');
const icon = mobileMenuBtn.querySelector('i');
icon.setAttribute('data-feather', 'menu');
feather.replace();
});
});
// Re-initialize feather icons
feather.replace();
}
}
customElements.define('custom-navbar', CustomNavbar);