class HeaderComponent extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Add event listeners
this.shadowRoot.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
this.setActiveLink(e.target);
});
});
}
setActiveLink(activeLink) {
this.shadowRoot.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('active');
});
activeLink.classList.add('active');
}
}
customElements.define('header-component', HeaderComponent);
// Global functions for the header
function toggleNotifications() {
// Toggle notifications dropdown
console.log('Toggle notifications');
showNotification('You have 3 new notifications', 'info');
}
function toggleTheme() {
// Toggle between light and dark mode
const html = document.documentElement;
const isDark = html.classList.contains('dark');
if (isDark) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
showNotification(`Switched to ${isDark ? 'light' : 'dark'} mode`, 'info');
}
function toggleMobileMenu() {
// Toggle mobile menu
console.log('Toggle mobile menu');
}