first draft but not working yet

components/app-root.js

@@ -0,0 +1,46 @@
+import { LitElement, html, css } from "lit";
+import { store} from "../store/index.js";
+import { StoreController } from "../controllers/store.js";
+import "./nav-bar.js";
+import "./page-home.js";
+import "./page-items.js";
+
+class AppRoot extends LitElement {
+    #hydrated = new StoreController(this, store, s => s._hydrated);
+    #user = new StoreController(this, store, s => s.user);
+    #route = new StoreController(this, store, s => s.route);
+
+    static styles = css`
+        :host {
+            display: block;
+            min-height: 100vh;
+        }
+        
+        .loading {
+            display: grid;
+            place-items: center;
+            height: 100vh;
+            opacity: 0.4;
+        }
+    `;
+
+    render() {
+        if (!this.#hydrated.value) {
+            return html`<div class="loading">loading...</div>`;
+        }
+        return html`
+            <nav-bar .user=${this.#user.value}></nav-bar>
+            <main>${this.#renderRoute()}</main>
+        `;
+    }
+
+    #renderRoute() {
+        switch (this.#route.value) {
+            case "home": return html`<page-home></page-home>`;
+            case "items": return html`<page-items></page-items>`;
+            default: return html`<page-home></page-home>`;
+        }
+    }
+}
+
+customElements.define('app-root', AppRoot);