Initial commitHEADmain

1 files changed, 79 insertions, 0 deletions

diff --git a/src/components/header.ts b/src/components/header.ts
new file mode 100644
index 0000000..2c896d5
--- /dev/null
+++ b/src/components/header.ts
@@ -0,0 +1,79 @@
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+@customElement('app-header')
+export class AppHeader extends LitElement {
+  @property({ type: String }) title = 'PWA Starter';
+
+  @property({ type: Boolean}) enableBack: boolean = false;
+
+  static get styles() {
+    return css`
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: var(--app-color-primary);
+        color: white;
+        height: 4em;
+        padding-left: 16px;
+        padding-top: 12px;
+
+        position: fixed;
+        left: env(titlebar-area-x, 0);
+        top: env(titlebar-area-y, 0);
+        height: env(titlebar-area-height, 50px);
+        width: env(titlebar-area-width, 100%);
+        -webkit-app-region: drag;
+      }
+
+      header h1 {
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: 20px;
+        font-weight: bold;
+      }
+
+      nav a {
+        margin-left: 10px;
+      }
+
+      #back-button-block {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 12em;
+      }
+
+      @media(prefers-color-scheme: light) {
+        header {
+          color: black;
+        }
+
+        nav a {
+          color: initial;
+        }
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`
+      <header>
+
+        <div id="back-button-block">
+          ${this.enableBack ? html`<sl-button href="${(import.meta as any).env.BASE_URL}">
+            Back
+          </sl-button>` : null}
+
+          <h1>${this.title}</h1>
+        </div>
+      </header>
+    `;
+  }
+}