/** * zen-nav.js — Zen dashboard navigation bar Web Component * * Usage: * * * * Node * Orchestrator * * * Each child becomes a nav link. The current page is * highlighted automatically based on the href. */ class ZenNav extends HTMLElement { connectedCallback() { if (!this.shadowRoot) this.attachShadow({ mode: 'open' }); this._render(); } _render() { const currentPath = window.location.pathname; const items = Array.from(this.querySelectorAll(':scope > a')); const links = items.map(a => { const href = a.getAttribute('href') || ''; const label = a.textContent.trim(); const active = currentPath.endsWith(href); return `${label}`; }).join(''); this.shadowRoot.innerHTML = ` `; } } customElements.define('zen-nav', ZenNav);