first draft but not working yet

components/nav-bar.js

@@ -0,0 +1,64 @@
+// components/nav-bar.js
+import { LitElement, html, css } from 'lit'
+import { store } from '../store/index.js'
+import { StoreController } from '../controllers/store.js'
+
+class NavBar extends LitElement {
+  #route = new StoreController(this, store, s => s.route)
+
+  static properties = {
+    user: { type: Object }
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: 0 1.5rem;
+      border-bottom: 1px solid #e2e8f0;
+    }
+    nav {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 3.5rem;
+    }
+    .links { display: flex; gap: 1.5rem; }
+    a {
+      cursor: pointer;
+      font-size: 0.9rem;
+      color: #64748b;
+      text-decoration: none;
+    }
+    a[active] { color: #0f172a; font-weight: 600; }
+    .user { font-size: 0.85rem; color: #94a3b8; }
+  `
+
+  #navigate(route, e) {
+    e.preventDefault()
+    store.getState().navigate(route)
+  }
+
+  #link(route, label) {
+    return html`
+      
+        href="/${route}"
+        ?active=${this.#route.value === route}
+        @click=${(e) => this.#navigate(route, e)}
+      >${label}</a>
+    `
+  }
+
+  render() {
+    return html`
+      <nav>
+        <div class="links">
+          ${this.#link('home', 'Home')}
+          ${this.#link('items', 'Items')}
+        </div>
+        <span class="user">${this.user?.name ?? 'Guest'}</span>
+      </nav>
+    `
+  }
+}
+
+customElements.define('nav-bar', NavBar)