attempting to resurrect full beans

components/nav-bar.js

@@ -1,10 +1,13 @@
 // components/nav-bar.js
 import { LitElement, html, css } from 'lit'
+import { store } from '../store/index.js'
+import { StoreController } from "../controllers/store-controller.js";
 
 class NavBar extends LitElement {
+  #route = new StoreController(this, store, s => s.route)
+
   static properties = {
-    user: { type: Object },
-    route: { type: String }
+    user: { type: Object }
   }
 
   static styles = css`
@@ -32,18 +35,14 @@ class NavBar extends LitElement {
 
   #navigate(route, e) {
     e.preventDefault()
-    this.dispatchEvent(new CustomEvent('navigate', { 
-      detail: { route },
-      bubbles: true,
-      composed: true
-    }))
+    store.getState().navigate(route)
   }
 
   #link(route, label) {
     return html`
       <a
         href="/${route}"
-        ?active=${this.route === route}
+        ?active=${this.#route.value === route}
         @click=${(e) => this.#navigate(route, e)}
       >${label}</a>
     `
@@ -62,4 +61,4 @@ class NavBar extends LitElement {
   }
 }
 
-customElements.define('nav-bar', NavBar)
+customElements.define('nav-bar', NavBar)