class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Mobile menu toggle
const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
feather.replace();
});
// Theme toggle for both desktop and mobile
const themeToggle = this.shadowRoot.getElementById('theme-toggle');
const mobileThemeToggle = this.shadowRoot.getElementById('mobile-theme-toggle');
const toggleTheme = () => {
const html = document.documentElement;
if (html.classList.contains('dark')) {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
};
if (themeToggle) {
themeToggle.addEventListener('click', toggleTheme);
}
if (mobileThemeToggle) {
mobileThemeToggle.addEventListener('click', toggleTheme);
}
// Close mobile menu when clicking outside
document.addEventListener('click', (event) => {
if (!this.shadowRoot.contains(event.target) && !mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
});
// Highlight active nav link based on current page
const currentPath = window.location.pathname.split('/').pop() || 'index.html';
const navLinks = this.shadowRoot.querySelectorAll('.nav-link');
navLinks.forEach(link => {
if (link.getAttribute('href') === currentPath) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
}
customElements.define('custom-navbar', CustomNavbar);