@triptease/tt-navbar 0.0.40 → 0.0.42

package/dist/web/TtNavbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.40
+* @triptease/tt-navbar v0.0.42
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -2027,23 +2027,34 @@ var Routes = {
 var NavbarController = class {
   constructor(host) {
     this._isOpen = true;
+    this._hasInitialized = false;
     (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();
-      }
+  hostUpdate() {
+    if (!this._hasInitialized && window.Clerk) {
+      this._removeClerkListener = window.Clerk.addListener((resources) => {
+        const { user: user2 } = resources;
+        if (user2 && !this._hasInitialized) {
+          const navigationOpen = user2.unsafeMetadata?.preferences?.ui?.navigationOpen;
+          if (navigationOpen !== void 0) {
+            this._isOpen = navigationOpen;
+            this.host.requestUpdate();
+          }
+          this._hasInitialized = true;
+        }
+      });
+    }
+  }
+  hostDisconnected() {
+    if (this._removeClerkListener) {
+      this._removeClerkListener();
     }
   }
   async toggle() {
-    const newState = !this._isOpen;
-    this._isOpen = newState;
+    this._isOpen = !this._isOpen;
     if (window.Clerk) {
       await window.Clerk.user?.update({
         unsafeMetadata: {
@@ -2052,7 +2063,7 @@ var NavbarController = class {
             ...window.Clerk.user?.unsafeMetadata?.preferences,
             ui: {
               ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,
-              navigationOpen: newState
+              navigationOpen: this.isOpen
             }
           }
         }
@@ -2113,7 +2124,6 @@ var TtNavbar = class extends i4 {
           const clientSpecificUrl = mappedUrl.includes("$CLIENT_KEY") ? mappedUrl.replace("$CLIENT_KEY", this.clientKey) : mappedUrl;
           const links = Object.values(this.allNavLinks);
           bestMatch = links.find((link) => link.href.includes(clientSpecificUrl));
-          console.log({ mappedUrl, clientSpecificUrl, bestMatch });
         }
       }
       if (!bestMatch) {
@@ -2375,24 +2385,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(
+                      <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>
-                        `
+                            <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>
+                    ` : x`
+                      <div class="single-client-name">
+                        ${this.clients.find((m3) => m3.clientKey === this.clientKey)?.displayName}
+                      </div>
+                    `}
             </div>
             <a
               id="logout-link"