ENH: router points to stub page components

www/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@lit-labs/router": "^0.1.1",
-    "@material/web": "0.1.0-alpha.0",
+    "@material/web": "github:material-components/material-web#e8ba229dd09d98a3ab68d667bf8c7f0df69daa53",
     "lit": "^2.4.0"
   },
   "devDependencies": {

www/src/hasi-app.ts

@@ -1,10 +1,42 @@
-import { LitElement, css, html } from "lit";
+import { html, literal } from "lit/static-html.js";
+import { LitElement, css } from "lit";
 import { customElement } from "lit/decorators.js";
 import { Router } from "@lit-labs/router";
 import "@material/web/navigationdrawer/navigation-drawer.js";
 import "@material/web/button/filled-link-button.js";
+import "@material/web/list/list.js";
+import "@material/web/list/list-item.js";
 
 import "./top-app-bar.js";
+import "./population-root.js";
+import "./individual-root.js";
+import "./processing-root.js";
+
+const PAGES = {
+  population: { title: "Population", path: "/", tag: literal`population-root` },
+  individual: {
+    title: "Individual",
+    path: "/individual",
+    tag: literal`individual-root`,
+  },
+  processing: {
+    title: "Processing",
+    path: "/processing",
+    tag: literal`processing-root`,
+  },
+};
+
+const PAGE_ITEMS = Object.values(PAGES).map(
+  ({ path, title }) => html`
+    <md-list-item>
+      <md-filled-link-button
+        label="${title}"
+        href="${path}"
+        slot="start"
+      ></md-filled-link-button>
+    </md-list-item>
+  `
+);
 
 const appTitle = "Osteoarthritis Biomarker Analysis";
 
@@ -14,65 +46,36 @@ const appTitle = "Osteoarthritis Biomarker Analysis";
  */
 @customElement("hasi-app")
 export class HasiApp extends LitElement {
-  private _routes = new Router(this, [
-    { path: "/", render: () => html`<h1>Population</h1>` },
-    { path: "/individual", render: () => html`<h1>Individual</h1>` },
-    { path: "/processing", render: () => html`<h1>Processing</h1>` },
-  ]);
+  private _routes = new Router(
+    this,
+    Object.values(PAGES).map(({ path, tag }) => {
+      return {
+        path,
+        render: () => html`<${tag}></${tag}>`,
+      };
+    })
+  );
 
   render() {
     return html`
       <md-navigation-drawer opened="true">
         <h3>${appTitle}</h3>
-        <md-filled-link-button
-          label="Population"
-          href="/"
-        ></md-filled-link-button>
-        <md-filled-link-button
-          label="Individual"
-          href="individual"
-        ></md-filled-link-button>
-        <md-filled-link-button
-          label="Processing"
-          href="processing"
-        ></md-filled-link-button>
+        <md-list role="menu"> ${PAGE_ITEMS} </md-list>
       </md-navigation-drawer>
-      <div>
-        <top-app-bar>
-          <h1>${this._routes.outlet()}</h1>
-        </top-app-bar>
-        <div class="main-content">
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </p>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </p>
-        </div>
-      </div>
+      <div class="main-content">${this._routes.outlet()}</div>
     `;
   }
   static styles = css`
     :host {
+      height: 100%;
+      width: 100%;
+
+      padding: 10px;
       display: flex;
     }
 
     .main-content {
-      max-width: 1280px;
-      margin: 0 auto;
-      padding: 2rem;
+      flex: 1;
     }
   `;
 }

www/src/index.css

@@ -15,13 +15,20 @@
   -webkit-text-size-adjust: 100%;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+html,
+body {
+  margin: 0;
+  padding: 0;
 }
-a:hover {
-  color: #535bf2;
+
+body {
+  height: 100vh;
+  width: 100vw;
+}
+
+/* include border and padding in element width and height */
+* {
+  box-sizing: border-box;
 }
 
 @media (prefers-color-scheme: light) {

www/src/individual-root.ts

@@ -0,0 +1,23 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+/**
+ * title
+ *
+ */
+@customElement("individual-root")
+export class IndividualRoot extends LitElement {
+  render() {
+    return html`<top-app-bar title="Individual"> </top-app-bar> `;
+  }
+  static styles = css`
+    :host {
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "individual-root": IndividualRoot;
+  }
+}

www/src/population-root.ts

@@ -0,0 +1,42 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+/**
+ * title
+ *
+ */
+@customElement("population-root")
+export class PopulationRoot extends LitElement {
+  render() {
+    return html`
+      <top-app-bar title="Population"> </top-app-bar>
+      <div class="main-layout">
+        <div>Charts and Biomarkers</div>
+        <div>Image Viewer</div>
+      </div>
+    `;
+  }
+  static styles = css`
+    :host {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .main-layout {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .main-layout > div {
+      flex: 1;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "population-root": PopulationRoot;
+  }
+}

www/src/processing-root.ts

@@ -0,0 +1,23 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+/**
+ * title
+ *
+ */
+@customElement("processing-root")
+export class ProcessingRoot extends LitElement {
+  render() {
+    return html`<top-app-bar title="Processing"> </top-app-bar> `;
+  }
+  static styles = css`
+    :host {
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "processing-root": ProcessingRoot;
+  }
+}

www/src/top-app-bar.ts

@@ -1,18 +1,15 @@
 import { LitElement, css, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 /**
  * title
  *
  */
 @customElement("top-app-bar")
 export class TopAppBar extends LitElement {
+  @property() title: string = "title";
   render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
+    return html`<h1>${this.title}</h1>`;
   }
   static styles = css`
     :host {