import { getUser, clearToken } from '../../lib/auth.mjs';
const BREADCRUMBS = {
'/': ['Dashboard'],
'/work-orders': ['Work Orders'],
'/work-orders/new': ['Work Orders', 'New'],
'/registry/people': ['Resources', 'People'],
'/registry/vehicles': ['Resources', 'Vehicles'],
'/registry/equipment': ['Resources', 'Equipment'],
'/registry/materials': ['Resources', 'Materials'],
'/reports': ['Reports'],
'/users': ['Admin', 'Users'],
'/settings': ['Admin', 'Settings'],
};
class AppTopbar extends HTMLElement {
#menuOpen = false;
connectedCallback() {
this.#render();
window.addEventListener('hashchange', () => this.#render());
document.addEventListener('click', e => {
if (!this.contains(e.target) && this.#menuOpen) {
this.#menuOpen = false;
this.#render();
}
});
}
#render() {
const user = getUser();
const path = decodeURIComponent(location.hash.slice(1)) || '/';
const crumb = BREADCRUMBS[path] || [path.split('/').filter(Boolean).map(s => s.replace(/-/g, ' ')).join(' › ')];
const initials = (user?.displayName || user?.username || 'U')
.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
this.innerHTML = `
${this.#menuOpen ? `
` : ''}`;
if (window.lucide) lucide.createIcons({ root: this });
this.querySelector('#user-menu-btn')?.addEventListener('click', e => {
e.stopPropagation();
this.#menuOpen = !this.#menuOpen;
this.#render();
});
this.querySelector('#dd-logout')?.addEventListener('click', () => {
clearToken();
window.dispatchEvent(new CustomEvent('auth:logout'));
});
this.querySelector('#mobile-menu')?.addEventListener('click', () => {
window.dispatchEvent(new CustomEvent('sidebar:toggle'));
});
}
}
customElements.define('app-topbar', AppTopbar);