@triptease/tt-navbar 0.0.45 → 0.0.47

package/dist/web/styles.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.45
+* @triptease/tt-navbar v0.0.47
 */
 
 // ../../node_modules/@lit/reactive-element/css-tag.js

package/dist/web/triptease-logo.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.45
+* @triptease/tt-navbar v0.0.47
 */
 
 // src/triptease-logo.ts

package/dist/web/tt-navbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.45
+* @triptease/tt-navbar v0.0.47
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -2027,54 +2027,11 @@ var Routes = {
   CampaignManager: "CampaignManager"
 };
 
-// src/NavbarController.ts
-var NavbarController = class {
-  constructor(host) {
-    this._isOpen = true;
-    this._hasInitialized = false;
-    (this.host = host).addController(this);
-  }
-  get isOpen() {
-    return this._isOpen;
-  }
-  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() {
-    this._isOpen = !this._isOpen;
-    if (window.Clerk) {
-      window.Clerk.user?.update({
-        unsafeMetadata: {
-          ...window.Clerk.user?.unsafeMetadata,
-          preferences: {
-            ...window.Clerk.user?.unsafeMetadata?.preferences,
-            ui: {
-              ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,
-              navigationOpen: this.isOpen
-            }
-          }
-        }
-      });
-    }
-    this.host.requestUpdate();
-  }
+// src/Config.ts
+var Config = {
+  NavbarStateCookieName: "tt-navbar-state",
+  NavbarStateCookieOpenValue: "open",
+  NavbarStateCookieClosedValue: "closed"
 };
 
 // src/TtNavbar.ts
@@ -2091,8 +2048,8 @@ var TtNavbar = class extends i4 {
     super(...arguments);
     this.campaignManagerUrl = "https://app.campaign-manager.triptease.io";
     this.clients = [];
-    this.sidebarOpen = true;
-    this.navbarController = new NavbarController(this);
+    this.initialState = void 0;
+    this.isOpen = true;
     /*
      * Set the active state for the current page.
      *
@@ -2167,14 +2124,20 @@ var TtNavbar = class extends i4 {
     };
     this.toggleSidebar = () => {
       this.closeAllDetails();
-      this.navbarController.toggle();
+      this.isOpen = !this.isOpen;
+      const {
+        NavbarStateCookieName,
+        NavbarStateCookieOpenValue,
+        NavbarStateCookieClosedValue
+      } = Config;
+      document.cookie = `${NavbarStateCookieName}=${this.isOpen ? NavbarStateCookieOpenValue : NavbarStateCookieClosedValue}; path=/; max-age=31536000`;
     };
-    this.handleToggle = (e10) => {
+    this.handleDetailsToggle = (e10) => {
       const { newState } = e10;
       const target = e10.currentTarget;
       if (newState === "open") {
-        if (!this.navbarController.isOpen) {
-          this.navbarController.toggle();
+        if (!this.isOpen) {
+          this.toggleSidebar();
         }
         this.closeAllDetails(target);
       }
@@ -2206,6 +2169,9 @@ var TtNavbar = class extends i4 {
     window.addEventListener("popstate", this.setActiveState);
     window.addEventListener("tetris:navigate", this.setActiveState);
     super.connectedCallback();
+    if (this.initialState) {
+      this.isOpen = this.initialState === "open";
+    }
   }
   disconnectedCallback() {
     window.removeEventListener("popstate", this.setActiveState);
@@ -2214,8 +2180,8 @@ var TtNavbar = class extends i4 {
   }
   render() {
     return x`
-      <nav id=${this.id} class="${this.navbarController.isOpen ? "" : "sidebar-closed"}">
-        <div class="sidebar-header ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
+      <nav id=${this.id} class="${this.isOpen ? "" : "sidebar-closed"}">
+        <div class="sidebar-header ${this.isOpen ? "" : "sidebar-closed"}">
           <div class="logo">
             ${o8(tripteaseLogo)}
           </div>
@@ -2228,7 +2194,7 @@ var TtNavbar = class extends i4 {
           </button>
         </div>
 
-        <div class="nav-items ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
+        <div class="nav-items ${this.isOpen ? "" : "sidebar-closed"}">
           <a
             class="nav-item"
             href=${this.buildUrl("/")}
@@ -2247,7 +2213,7 @@ var TtNavbar = class extends i4 {
             data-intercom-target="channels"
           >${o8(channels)}<span>Channels</span></a
           >
-          <details id="market-insights" @toggle=${this.handleToggle} data-intercom-target="market-insights">
+          <details id="market-insights" @toggle=${this.handleDetailsToggle} data-intercom-target="market-insights">
             <summary>
               ${o8(graph)}
               <span>Market Insights</span>
@@ -2270,7 +2236,7 @@ var TtNavbar = class extends i4 {
               >
             </div>
           </details>
-          <details id="settings" @toggle=${this.handleToggle} data-intercom-target="settings">
+          <details id="settings" @toggle=${this.handleDetailsToggle} data-intercom-target="settings">
             <summary>
               ${o8(gear)}
               <span>Settings</span>
@@ -2308,7 +2274,7 @@ var TtNavbar = class extends i4 {
             </div>
           </details>
           <hr />
-          <details id="account" @toggle=${this.handleToggle} data-intercom-target="account">
+          <details id="account" @toggle=${this.handleDetailsToggle} data-intercom-target="account">
             <summary>
               ${o8(user)}
               <span>Account</span>
@@ -2331,7 +2297,7 @@ var TtNavbar = class extends i4 {
               >
             </div>
           </details>
-          <details id="billing-routes" @toggle=${this.handleToggle} data-intercom-target="billing">
+          <details id="billing-routes" @toggle=${this.handleDetailsToggle} data-intercom-target="billing">
             <summary>
               ${o8(wallet)}
               <span>Billing</span>
@@ -2355,7 +2321,7 @@ var TtNavbar = class extends i4 {
             </div>
           </details>
         </div>
-        <div class="tertiary-nav ${this.navbarController.isOpen ? "" : "sidebar-closed"}">
+        <div class="tertiary-nav ${this.isOpen ? "" : "sidebar-closed"}">
           <div id="external-links" class="nav-items">
             <a
               class="nav-item external-link"
@@ -2439,6 +2405,12 @@ __decorateClass([
 __decorateClass([
   n4({ type: Array, converter: jsonArrayConverter })
 ], TtNavbar.prototype, "clients", 2);
+__decorateClass([
+  n4({ type: String, attribute: "initial-state" })
+], TtNavbar.prototype, "initialState", 2);
+__decorateClass([
+  r5()
+], TtNavbar.prototype, "isOpen", 2);
 __decorateClass([
   n4({ type: Object })
 ], TtNavbar.prototype, "onClientChange", 2);
@@ -2448,9 +2420,6 @@ __decorateClass([
 __decorateClass([
   r6("a")
 ], TtNavbar.prototype, "allNavLinks", 2);
-__decorateClass([
-  r5()
-], TtNavbar.prototype, "sidebarOpen", 2);
 
 // src/tt-navbar.ts
 if (typeof window !== "undefined") {