class CustomNavbar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
`;
// Initialize mobile menu toggle
const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
const mobileMenu = this.shadowRoot.getElementById('mobileMenu');
if (mobileMenuBtn && mobileMenu) {
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('open');
});
}
// Check authentication status and update navigation
const token = localStorage.getItem('auth_token');
if (token) {
// User is logged in - update login link to logout
const loginLinks = this.shadowRoot.querySelectorAll('a[href="/login.html"]');
loginLinks.forEach(link => {
link.textContent = 'Logout';
link.href = '#';
link.addEventListener('click', function(e) {
e.preventDefault();
localStorage.removeItem('auth_token');
localStorage.removeItem('user_type');
localStorage.removeItem('user_email');
window.location.href = '/';
});
}
});
}
}
customElements.define('custom-navbar', CustomNavbar);