zulip/components/nav-bar.js

// components/nav-bar.js
import { LitElement, html, css } from 'lit'
import { store } from '../store/index.js'
import { StoreController } from "../controllers/store-controller.js";

class NavBar extends LitElement {
  #route = new StoreController(this, store, s => s.route)

  static properties = {
    user: { type: Object }
  }

  static styles = css`
    :host {
      display: block;
      padding: 0 1.5rem;
      border-bottom: 1px solid #e2e8f0;
    }
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3.5rem;
    }
    .links { display: flex; gap: 1.5rem; }
    a {
      cursor: pointer;
      font-size: 0.9rem;
      color: #64748b;
      text-decoration: none;
    }
    a[active] { color: #0f172a; font-weight: 600; }
    .user { font-size: 0.85rem; color: #94a3b8; }
  `

  #navigate(route, e) {
    e.preventDefault()
    store.getState().navigate(route)
  }

  #link(route, label) {
    return html`
      <a
        href="/${route}"
        ?active=${this.#route.value === route}
        @click=${(e) => this.#navigate(route, e)}
      >${label}</a>
    `
  }

  render() {
    return html`
      <nav>
        <div class="links">
          ${this.#link('home', 'Home')}
          ${this.#link('items', 'Items')}
        </div>
        <span class="user">${this.user?.name ?? 'Guest'}</span>
      </nav>
    `
  }
}

customElements.define('nav-bar', NavBar)