1 files changed, 79 insertions, 0 deletions
diff --git a/src/zenserver/frontend/html/nav.js b/src/zenserver/frontend/html/nav.js
new file mode 100644
index 000000000..a5de203f2
--- /dev/null
+++ b/src/zenserver/frontend/html/nav.js
@@ -0,0 +1,79 @@
+/**
+ * zen-nav.js — Zen dashboard navigation bar Web Component
+ *
+ * Usage:
+ *   <script src="nav.js" defer></script>
+ *
+ *   <zen-nav>
+ *     <a href="compute.html">Node</a>
+ *     <a href="orchestrator.html">Orchestrator</a>
+ *   </zen-nav>
+ *
+ * Each child <a> 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 `<a class="nav-link${active ? ' active' : ''}" href="${href}">${label}</a>`;
+    }).join('');
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+        :host {
+          display: block;
+          margin-bottom: 16px;
+        }
+
+        .nav-bar {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          padding: 4px;
+          background: var(--theme_g3);
+          border: 1px solid var(--theme_g2);
+          border-radius: 6px;
+        }
+
+        .nav-link {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+          font-size: 13px;
+          font-weight: 500;
+          color: var(--theme_g1);
+          text-decoration: none;
+          padding: 6px 14px;
+          border-radius: 4px;
+          transition: color 0.15s, background 0.15s;
+        }
+
+        .nav-link:hover {
+          color: var(--theme_g0);
+          background: var(--theme_p4);
+        }
+
+        .nav-link.active {
+          color: var(--theme_bright);
+          background: var(--theme_g2);
+        }
+      </style>
+      <nav class="nav-bar">${links}</nav>
+    `;
+  }
+}
+
+customElements.define('zen-nav', ZenNav);