@triptease/tt-navbar 0.0.4 → 0.0.5

package/dist/web/tt-navbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.4
+* @triptease/tt-navbar v0.0.5
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -591,30 +591,133 @@ function n4(t3) {
 }
 
 // src/styles.ts
-var styles = i``;
+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.onNavigate = () => {
+    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`
       <nav id=${this.id}>
-        <a href="/">Dashboard</a>
-        <a href="/campaigns">Campaigns</a>
-        <a href="/channels">Channels</a>
-        <a href="/guest-insights/zxd47KQGAP">Guest insights</a>
+        <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 = styles;
 __decorateClass([
-  n4()
-], TtNavbar.prototype, "onNavigate", 2);
+  n4({ type: Function })
+], TtNavbar.prototype, "navigate", 2);
+__decorateClass([
+  n4({ type: String })
+], TtNavbar.prototype, "baseUrl", 2);
+__decorateClass([
+  n4({ type: String })
+], TtNavbar.prototype, "clientKey", 2);
 
 // src/tt-navbar.ts
 window.customElements.define("tt-navbar", TtNavbar);