added some base code

flightscore/src/components/nav-bar.ts

@@ -1,47 +1,52 @@
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import styles from './nav-bar.css?inline';
 
 @customElement('nav-bar')
 export class NavBar extends LitElement {
-  static styles = css`
-    nav {
-      background: #222;
-      color: white;
-      display: flex;
-      justify-content: space-between;
-      padding: 1rem;
+    static styles = css`${unsafeCSS(styles)}`;
+
+    @state() theme: 'light' | 'dark' =
+        (localStorage.getItem('theme') as 'light' | 'dark') ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light');
+
+    firstUpdated() {
+        document.documentElement.setAttribute('data-theme', this.theme);
     }
-    a {
-      color: white;
-      margin-right: 1rem;
-      text-decoration: none;
+
+    toggleTheme() {
+        this.theme = this.theme === 'light' ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', this.theme);
+        localStorage.setItem('theme', this.theme);
     }
-  `;
-  navigate(path: string) {
-    this.dispatchEvent(new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true }));
-  }
-  render() {
-    return html`
+
+    navigate(path: string) {
+        this.dispatchEvent(
+            new CustomEvent('nav', { detail: { path }, bubbles: true, composed: true })
+        );
+    }
+
+    render() {
+        return html`
       <nav>
-        <div>🎈 Balloon Tracker</div>
-        <div>
+        <div class="brand"><img src="/logo.svg" alt="Flight Score Logo" /> FlightScore</div>
+        <div class="links">
           <a href="/" @click=${(e: Event) => (e.preventDefault(), this.navigate('/'))}>
             Home
           </a>
           <a
-            href="/tracks"
-            @click=${(e: Event) => (e.preventDefault(), this.navigate('/tracks'))}
+            href="/competitions"
+            @click=${(e: Event) => (e.preventDefault(), this.navigate('/competitions'))}
           >
-            Tracks
-          </a>
-          <a
-            href="/about"
-            @click=${(e: Event) => (e.preventDefault(), this.navigate('/about'))}
-          >
-            About
+            Competitions
           </a>
+          <button @click=${this.toggleTheme}>
+            ${this.theme === 'light' ? '🌙 Dark' : '☀️ Light'}
+          </button>
         </div>
       </nav>
     `;
-  }
+    }
 }