Added base code

2026-02-12 14:06:41 +01:00
parent 4678963a22
commit a62ce26bfa
9 changed files with 144 additions and 158 deletions
@@ -0,0 +1,47 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('nav-bar')
+export class NavBar extends LitElement {
+  static styles = css`
+    nav {
+      background: #222;
+      color: white;
+      display: flex;
+      justify-content: space-between;
+      padding: 1rem;
+    }
+    a {
+      color: white;
+      margin-right: 1rem;
+      text-decoration: none;
+    }
+  `;
+  navigate(path: string) {
+    this.dispatchEvent(new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true }));
+  }
+  render() {
+    return html`
+      <nav>
+        <div>🎈 Balloon Tracker</div>
+        <div>
+          <a href="/" @click=${(e: Event) => (e.preventDefault(), this.navigate('/'))}>
+            Home
+          </a>
+          <a
+            href="/tracks"
+            @click=${(e: Event) => (e.preventDefault(), this.navigate('/tracks'))}
+          >
+            Tracks
+          </a>
+          <a
+            href="/about"
+            @click=${(e: Event) => (e.preventDefault(), this.navigate('/about'))}
+          >
+            About
+          </a>
+        </div>
+      </nav>
+    `;
+  }
+}