finished pruning for lit-only demo

components/nav-bar.js

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