@trailstash/ultra/components/nav-bar.js

A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc

import { h, t } from "../lib/dom.js";

const style = new CSSStyleSheet();
style.replaceSync(`
  :host {
    display: block;
  }
  nav {
    background: white;
    border-bottom: 1px solid #8f8f9d;
    padding: 4px;
  }
  nav.app {
    padding: 12px;
    font-size: 20px;
  }
  :host(.fs) nav {
    background: none;
    border: none;
    padding: 0;
  }
  a {
    color: black;
    text-decoration: none;
  }
  b, img {
    margin: 0 0 0 10px;
  }
  .app img {
    margin: 0 10px;
  }
  img {
    vertical-align: middle;
    height: 22px;
  }
  .app img {
    vertical-align: text-bottom;
  }
  nav > * {
    margin-right: 4px;
  }
  nav.app > * {
    line-height: 32.66px;
    margin-right: 24px;
  }
  slot {
    padding: 100px;
  }
  ::slotted(fs-button) {
    z-index: 1;
    position: fixed;
    top: 4px;
    right: 4px;
  }
  :host(.fs) nav > a {
    display: none;
  }
  @media (max-width: 900px) {
    b {
      display: none;
    }
  }
`);

export class NavBar extends HTMLElement {
  title;
  icon;
  mode = "ide";

  constructor() {
    super();
  }

  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });
    shadow.adoptedStyleSheets.push(style);
    const nav = h(
      "nav",
      this.mode === "app" ? { className: "app" } : {},
      ...(this.mode === "app"
        ? [
            h(
              "span",
              {},
              h("img", { src: this.icon || "./logo.png" }),
              t(this.title || "Ultra"),
            ),
          ]
        : []),
      h("slot", { name: "fs-button" }),
      h("slot", { name: "buttons" }),
      ...(this.mode === "ide"
        ? [
            h(
              "a",
              { href: "." },
              h("b", {}, t(this.title || "Ultra")),
              h("img", { src: this.icon || "./logo.png" }),
            ),
          ]
        : []),
    );
    shadow.appendChild(nav);
  }
}