class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Initialize mobile menu toggle
const mobileMenuButton = this.shadowRoot.getElementById('mobileMenuButton');
const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Initialize theme toggle
const themeToggle = this.shadowRoot.getElementById('themeToggle');
themeToggle.addEventListener('click', () => {
const html = document.documentElement;
if (html.classList.contains('dark')) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
themeToggle.innerHTML = '';
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
themeToggle.innerHTML = '';
}
feather.replace();
});
// Replace feather icons
feather.replace();
}
}
customElements.define('custom-navbar', CustomNavbar);