@triptease/tt-navbar 0.0.2 → 0.0.5

package/dist/web/tt-navbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.2
+* @triptease/tt-navbar v0.0.5
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -590,36 +590,134 @@ function n4(t3) {
   })(t3, e5, o6);
 }
 
+// src/styles.ts
+var styles = i`
+  nav {
+    max-width: 260px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  nav details div {
+    display: flex;
+    flex-direction: column;
+  }
+
+  hr {
+    background: black;
+    width: 100%;
+    height: 1px;
+    border: none;
+  }
+`;
+
 // src/TtNavbar.ts
 var TtNavbar = class extends i4 {
   constructor() {
     super(...arguments);
-    this.header = "Hey there";
-    this.counter = 5;
-  }
-  __increment() {
-    this.counter += 1;
+    this.buildUrl = (path) => {
+      if (!this.clientKey) throw new Error("clientKey is required");
+      const formattedPath = path.replace("$CLIENT_KEY", this.clientKey);
+      if (!this.baseUrl) return formattedPath;
+      return new URL(formattedPath, this.baseUrl).toString();
+    };
+    this.onAnchorClick = (e5) => {
+      if (this.navigate) {
+        this.navigate(e5);
+      }
+    };
   }
   render() {
     return x`
-      <h2>${this.header} Nr. ${this.counter}!</h2>
-      <button @click=${this.__increment}>increment</button>
+      <nav id=${this.id}>
+        <a href=${this.buildUrl("/")} @click=${this.onAnchorClick}>Dashboard</a>
+        <a href="https://app.campaign-manager.triptease.io">Campaigns</a>
+        <a href=${this.buildUrl("/channels")} @click=${this.onAnchorClick}
+          >Channels</a
+        >
+        <details>
+          <summary>Market Insights</summary>
+          <div>
+            <a
+              href=${this.buildUrl("/parity/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Parity</a
+            >
+            <a
+              href=${this.buildUrl("/guest-insights/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Guest insights</a
+            >
+          </div>
+        </details>
+        <details>
+          <summary>Settings</summary>
+          <div>
+            <a
+              href=${this.buildUrl("/$CLIENT_KEY/guest-behavioural-data")}
+              @click=${this.onAnchorClick}
+              >Email setup</a
+            >
+            <a
+              href=${this.buildUrl("/$CLIENT_KEY/crm-config")}
+              @click=${this.onAnchorClick}
+              >CRM connectivity</a
+            >
+            <a
+              href=${this.buildUrl("/settings/group")}
+              @click=${this.onAnchorClick}
+              >Group settings</a
+            >
+            <a
+              href=${this.buildUrl("/settings/$CLIENT_KEY/hotels/")}
+              @click=${this.onAnchorClick}
+              >Property settings</a
+            >
+          </div>
+        </details>
+        <hr />
+        <details>
+          <summary>Account</summary>
+          <div>
+            <a href=${this.buildUrl("/account")} @click=${this.onAnchorClick}
+              >User settings</a
+            >
+            <a
+              href=${this.buildUrl("/account/team/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Team and permissions</a
+            >
+          </div>
+        </details>
+        <details>
+          <summary>Billing</summary>
+          <div>
+            <a
+              href=${this.buildUrl("/account/billing-management/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Booking reconciliation</a
+            >
+            <a
+              href=${this.buildUrl("/subscriptions/$CLIENT_KEY")}
+              @click=${this.onAnchorClick}
+              >Subscriptions</a
+            >
+          </div>
+        </details>
+      </nav>
     `;
   }
 };
-TtNavbar.styles = i`
-    :host {
-      display: block;
-      padding: 25px;
-      color: var(--tt-navbar-text-color, #000);
-    }
-  `;
+TtNavbar.styles = styles;
+__decorateClass([
+  n4({ type: Function })
+], TtNavbar.prototype, "navigate", 2);
 __decorateClass([
   n4({ type: String })
-], TtNavbar.prototype, "header", 2);
+], TtNavbar.prototype, "baseUrl", 2);
 __decorateClass([
-  n4({ type: Number })
-], TtNavbar.prototype, "counter", 2);
+  n4({ type: String })
+], TtNavbar.prototype, "clientKey", 2);
 
 // src/tt-navbar.ts
 window.customElements.define("tt-navbar", TtNavbar);