42 lines
1.6 KiB
JavaScript
42 lines
1.6 KiB
JavaScript
const TABS = [
|
|
{ label: 'Dashboard', href: '/', icon: 'layout-dashboard' },
|
|
{ label: 'Work Orders', href: '/work-orders', icon: 'clipboard-list' },
|
|
{ label: 'People', href: '/registry/people', icon: 'users' },
|
|
{ label: 'Reports', href: '/reports', icon: 'bar-chart-2' },
|
|
];
|
|
|
|
class AppMobileNav extends HTMLElement {
|
|
connectedCallback() {
|
|
this.#render();
|
|
window.addEventListener('hashchange', () => this.#render());
|
|
}
|
|
|
|
#render() {
|
|
const path = decodeURIComponent(location.hash.slice(1)) || '/';
|
|
this.innerHTML = `
|
|
<style>
|
|
app-mobile-nav a {
|
|
flex: 1; display: flex; flex-direction: column; align-items: center;
|
|
justify-content: center; gap: .2rem; text-decoration: none;
|
|
color: var(--text-muted); font-size: .65rem; font-weight: 500;
|
|
padding: .4rem; position: relative; transition: color .15s;
|
|
}
|
|
app-mobile-nav a.active { color: var(--teal); }
|
|
app-mobile-nav a.active::after {
|
|
content: ''; position: absolute; bottom: 0; left: 25%; right: 25%;
|
|
height: 2px; background: var(--teal); border-radius: 1px;
|
|
}
|
|
app-mobile-nav a i { width: 20px; height: 20px; }
|
|
</style>
|
|
${TABS.map(t => {
|
|
const active = t.href === '/' ? path === '/' : path.startsWith(t.href);
|
|
return `<a href="#${t.href}" class="${active ? 'active' : ''}">
|
|
<i data-lucide="${t.icon}"></i>
|
|
<span>${t.label}</span>
|
|
</a>`;
|
|
}).join('')}`;
|
|
if (window.lucide) lucide.createIcons({ root: this });
|
|
}
|
|
}
|
|
customElements.define('app-mobile-nav', AppMobileNav);
|