@triptease/tt-navbar 0.0.34 → 0.0.36

package/dist/web/global.d.js

@@ -0,0 +1,4 @@
+/**
+* @triptease/tt-navbar v0.0.36
+*/
+//# sourceMappingURL=global.d.js.map

package/dist/web/global.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/web/index.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.34
+* @triptease/tt-navbar v0.0.36
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -2018,6 +2018,36 @@ var Routes = {
   CampaignManager: "CampaignManager"
 };
 
+// src/NavbarController.ts
+var NavbarController = class {
+  constructor(host) {
+    this._isOpen = true;
+    (this.host = host).addController(this);
+  }
+  get isOpen() {
+    return this._isOpen;
+  }
+  hostConnected() {
+    if (window.Clerk) {
+      const userSetting = window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
+      if (userSetting !== void 0) {
+        this._isOpen = userSetting;
+        this.host.requestUpdate();
+      }
+    }
+  }
+  async toggle() {
+    const newState = !this._isOpen;
+    this._isOpen = newState;
+    if (window.Clerk) {
+      await window.Clerk.user?.update({
+        unsafeMetadata: { preferences: { ui: { navigationOpen: newState } } }
+      });
+    }
+    this.host.requestUpdate();
+  }
+};
+
 // src/TtNavbar.ts
 var jsonArrayConverter = (value) => {
   if (!value) return [];
@@ -2033,6 +2063,7 @@ var TtNavbar = class extends i4 {
     this.campaignManagerUrl = "https://app.campaign-manager.triptease.io";
     this.clients = [];
     this.sidebarOpen = true;
+    this.navbarController = new NavbarController(this);
     /*
      * Set the active state for the current page.
      *
@@ -2106,14 +2137,14 @@ var TtNavbar = class extends i4 {
     };
     this.toggleSidebar = () => {
       this.closeAllDetails();
-      this.sidebarOpen = !this.sidebarOpen;
+      this.navbarController.toggle();
     };
     this.handleToggle = (e10) => {
       const { newState } = e10;
       const target = e10.currentTarget;
       if (newState === "open") {
-        if (!this.sidebarOpen) {
-          this.sidebarOpen = true;
+        if (!this.navbarController.isOpen) {
+          this.navbarController.toggle();
         }
         this.closeAllDetails(target);
       }
@@ -2143,16 +2174,18 @@ var TtNavbar = class extends i4 {
   }
   connectedCallback() {
     window.addEventListener("popstate", this.setActiveState);
+    window.addEventListener("tetris:navigate", this.setActiveState);
     super.connectedCallback();
   }
   disconnectedCallback() {
     window.removeEventListener("popstate", this.setActiveState);
+    window.removeEventListener("tetris:navigate", this.setActiveState);
     super.disconnectedCallback();
   }
   render() {
     return x`
-      <nav id=${this.id} class="${this.sidebarOpen ? "" : "sidebar-closed"}">
-        <div class="sidebar-header ${this.sidebarOpen ? "" : "sidebar-closed"}">
+      <nav id=${this.id} class="${this.navbarController.isOpen ? "" : "sidebar-closed"}">
+        <div class="sidebar-header ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
           <div class="logo">
             ${o8(tripteaseLogo)}
           </div>
@@ -2165,7 +2198,7 @@ var TtNavbar = class extends i4 {
           </button>
         </div>
 
-        <div class="nav-items ${this.sidebarOpen ? "" : "sidebar-closed"}">
+        <div class="nav-items ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
           <a
             class="nav-item"
             href=${this.buildUrl("/")}
@@ -2279,7 +2312,7 @@ var TtNavbar = class extends i4 {
             </div>
           </details>
         </div>
-        <div class="tertiary-nav ${this.sidebarOpen ? "" : "sidebar-closed"}">
+        <div class="tertiary-nav ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
           <div id="external-links" class="nav-items">
             <a
               class="nav-item external-link"
@@ -2313,22 +2346,24 @@ var TtNavbar = class extends i4 {
           <div class='nav-items'>
             <div id="client-selector">
               ${this.clients.length > 1 ? x`
-                <tt-combobox
-                  .openUpward=${true}
-                  .value=${this.clientKey ? [this.clientKey] : []}
-                  @change=${this.handleClientChange}
-                >
-                  ${this.clients.map((client) => x`
-                    <option slot="option" value=${client.clientKey}>
-                      ${client.displayName}
-                    </option>
-                  `)}
-                </tt-combobox>
-              ` : x`
-                <div class="single-client-name">
-                  ${this.clients.find((m3) => m3.clientKey === this.clientKey)?.displayName}
-                </div>
-              `}
+                      <tt-combobox
+                        .openUpward=${true}
+                        .value=${this.clientKey ? [this.clientKey] : []}
+                        @change=${this.handleClientChange}
+                      >
+                        ${this.clients.map(
+      (client) => x`
+                            <option slot="option" value=${client.clientKey}>
+                              ${client.displayName}
+                            </option>
+                          `
+    )}
+                      </tt-combobox>
+                    ` : x`
+                      <div class="single-client-name">
+                        ${this.clients.find((m3) => m3.clientKey === this.clientKey)?.displayName}
+                      </div>
+                    `}
             </div>
             <a
               id="logout-link"