class AppHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Add scroll effect
window.addEventListener('scroll', () => {
const header = this.shadowRoot.getElementById('header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Mobile menu toggle
const mobileMenuToggle = this.shadowRoot.getElementById('mobileMenuToggle');
const navLinks = this.shadowRoot.getElementById('navLinks');
mobileMenuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
// Close mobile menu when clicking a link
const links = navLinks.querySelectorAll('.nav-link');
links.forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
});
});
}
}
customElements.define('app-header', AppHeader);