First commit of group-ironmen-master directory.

group-ironmen-master/site/src/app-navigation/app-navigation.css

@@ -0,0 +1,49 @@
+app-navigation {
+  display: flex;
+  margin-bottom: 1em;
+  align-items: center;
+  padding: 8px 16px;
+  pointer-events: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.mobile {
+  display: none;
+}
+
+@media only screen and (max-width: 850px) {
+  .desktop {
+    display: none;
+  }
+
+  .mobile {
+    display: initial;
+  }
+}
+
+app-navigation .men-button img {
+  height: 24px;
+}
+.app-navigation__nav {
+  display: flex;
+  align-items: center;
+  column-gap: 6px;
+  justify-content: flex-start;
+  flex-grow: 1;
+}
+
+.app-navigation__separator {
+  flex-grow: 1;
+}
+
+.app-navigation__nav men-link {
+  margin: 0;
+}
+
+.app-navigation__group-name {
+  color: white;
+  font-size: 1.5em;
+  margin-right: 1em;
+  font-weight: 300;
+}

group-ironmen-master/site/src/app-navigation/app-navigation.html

@@ -0,0 +1,48 @@
+<h4 class="app-navigation__group-name">${group.groupName}</h4>
+<nav class="app-navigation__nav">
+  <men-link link-href="/group/items">
+    <button class="men-button" type="button" route-component="items-page">
+      <span class="desktop">Items</span>
+      <span class="mobile"><img loading="lazy" src="/ui/777-0.png" /></span>
+    </button>
+  </men-link>
+  <men-link link-href="/group/map">
+    <button class="men-button" type="button" route-component="map-page">
+      <span class="desktop">Map</span>
+      <span class="mobile"><img loading="lazy" src="/ui/1698-0.png" /></span>
+    </button>
+  </men-link>
+  <men-link link-href="/group/graphs">
+    <button class="men-button" type="button" route-component="skills-graphs">
+      <span class="desktop">Graphs</span>
+      <span class="mobile"><img loading="lazy" src="/ui/3579-0.png" /></span>
+    </button>
+  </men-link>
+  <men-link link-href="/group/panels">
+    <button class="men-button" type="button" route-component="panels-page">
+      <span class="desktop">Panels</span>
+      <span class="mobile"><img loading="lazy" src="/ui/1707-0.png" /></span>
+    </button>
+  </men-link>
+  <men-link link-href="/group/settings">
+    <button class="men-button" type="button" route-component="group-settings">
+      <span class="desktop">Settings</span>
+      <span class="mobile"><img loading="lazy" src="/ui/785-0.png" /></span>
+    </button>
+  </men-link>
+
+  <div class="app-navigation__separator desktop"></div>
+  <men-link link-href="/setup-instructions">
+    <button class="men-button" type="button">
+      <span class="desktop">Setup</span>
+      <span class="mobile"><img loading="lazy" src="/ui/1094-0.png" /></span>
+    </button>
+  </men-link>
+  <men-link link-href="/logout">
+    <button class="men-button" type="button">
+      <span class="desktop">Logout</span>
+      <span class="mobile"><img loading="lazy" src="/ui/225-0.png" /></span>
+    </button>
+  </men-link>
+  <donate-button></donate-button>
+</nav>

group-ironmen-master/site/src/app-navigation/app-navigation.js

@@ -0,0 +1,36 @@
+import { BaseElement } from "../base-element/base-element";
+import { storage } from "../data/storage";
+
+export class AppNavigation extends BaseElement {
+  constructor() {
+    super();
+  }
+
+  /* eslint-disable no-unused-vars */
+  html() {
+    const group = storage.getGroup();
+    return `{{app-navigation.html}}`;
+  }
+  /* eslint-enable no-unused-vars */
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.render();
+    this.subscribe("route-activated", this.handleRouteActivated.bind(this));
+  }
+
+  handleRouteActivated(route) {
+    const routeComponent = route.getAttribute("route-component");
+
+    const buttons = Array.from(this.querySelectorAll("button"));
+    for (const button of buttons) {
+      const c = button.getAttribute("route-component");
+      if (routeComponent === c) {
+        button.classList.add("active");
+      } else {
+        button.classList.remove("active");
+      }
+    }
+  }
+}
+customElements.define("app-navigation", AppNavigation);