36 lines
964 B
JavaScript
36 lines
964 B
JavaScript
|
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 {
|
||
|
|
#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;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
render() {
|
||
|
|
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);
|