class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Mobile toggle
const mobileToggle = this.shadowRoot.querySelector('.mobile-toggle');
const navLinks = this.shadowRoot.querySelector('.nav-links');
mobileToggle.addEventListener('click', () => {
navLinks.classList.toggle('open');
const icon = mobileToggle.querySelector('i');
if (navLinks.classList.contains('open')) {
icon.setAttribute('data-feather', 'x');
} else {
icon.setAttribute('data-feather', 'menu');
}
feather.replace();
});
// Theme toggle
const themeToggle = this.shadowRoot.querySelector('.theme-toggle');
themeToggle.addEventListener('click', () => {
const html = document.documentElement;
if (html.classList.contains('dark')) {
html.classList.remove('dark');
html.classList.add('light');
localStorage.setItem('theme', 'light');
themeToggle.innerHTML = ``;
} else {
html.classList.remove('light');
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
themeToggle.innerHTML = ``;
}
feather.replace();
});
// Set initial theme icon
const theme = localStorage.getItem('theme') || 'dark';
const icon = themeToggle.querySelector('i');
if (theme === 'light') {
icon.setAttribute('data-feather', 'sun');
} else {
icon.setAttribute('data-feather', 'moon');
}
feather.replace();
}
}
customElements.define('custom-navbar', CustomNavbar);