class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Add event listeners after rendering
setTimeout(() => {
const themeToggle = this.shadowRoot.getElementById('themeToggle');
const mobileThemeToggle = this.shadowRoot.getElementById('mobileThemeToggle');
const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
if (themeToggle) {
themeToggle.addEventListener('click', this.toggleTheme);
}
if (mobileThemeToggle) {
mobileThemeToggle.addEventListener('click', this.toggleTheme);
}
if (mobileMenuButton) {
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
feather.replace();
});
}
}, 0);
}
toggleTheme() {
const html = document.documentElement;
html.classList.toggle('dark');
// Save preference to localStorage
const isDark = html.classList.contains('dark');
localStorage.setItem('darkMode', isDark);
// Update icons
const icons = this.shadowRoot.querySelectorAll('[data-feather]');
icons.forEach(icon => {
if (icon.dataset.feather === 'moon' && !isDark) {
icon.dataset.feather = 'sun';
} else if (icon.dataset.feather === 'sun' && isDark) {
icon.dataset.feather = 'moon';
}
});
feather.replace();
}
}
customElements.define('custom-navbar', CustomNavbar);