@triptease/tt-navbar 0.0.27 → 0.0.28

package/dist/src/TtNavbar.d.ts

@@ -17,6 +17,8 @@ export declare class TtNavbar extends LitElement {
     protected allNavLinks: Array<HTMLAnchorElement>;
     private sidebarOpen;
     protected firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private setActiveState;
     private closeAllDetails;
     private toggleSidebar;

package/dist/src/TtNavbar.js

@@ -133,6 +133,14 @@ export class TtNavbar extends LitElement {
     firstUpdated() {
         this.setActiveState();
     }
+    connectedCallback() {
+        window.addEventListener('popstate', this.setActiveState);
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('popstate', this.setActiveState);
+        super.disconnectedCallback();
+    }
     render() {
         return html `
       <nav id=${this.id} class="${this.sidebarOpen ? '' : 'sidebar-closed'}">

package/dist/src/TtNavbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport {\n  campaigns,\n  channels,\n  chevronDown,\n  external,\n  gear,\n  graph,\n  home,\n  logout,\n  sidebarCollapsed,\n  user,\n  wallet\n} from '@triptease/icons';\nimport '@triptease/tt-combobox';\nimport { styles } from './styles.js';\nimport { tripteaseLogo } from './triptease-logo.js';\nimport { urlMappings } from './urlMappings.js';\nimport { Routes } from './Routes.js';\n\nconst jsonArrayConverter = (value: string | null) => {\n  if (!value) return [];\n  try {\n    return JSON.parse(value);\n  } catch {\n    return [];\n  }\n};\n\nexport class TtNavbar extends LitElement {\n  static styles = styles;\n\n  @property({ type: Function })\n  navigate: ((e: MouseEvent) => void) | undefined;\n\n  @property({ type: String, attribute: 'campaign-manager-url' })\n  campaignManagerUrl: string = 'https://app.campaign-manager.triptease.io';\n\n  @property({ type: String, attribute: 'platform-url' })\n  platformUrl?: string;\n\n  @property({ type: String, attribute: 'client-key' })\n  clientKey?: string;\n\n  @property({ type: String, attribute: 'active-route' })\n  activeRoute?: keyof typeof Routes;\n\n  @property({ type: Array, converter: jsonArrayConverter })\n  clients: { clientKey: string; displayName: string }[] = [];\n\n  @property({ type: Object })\n  onClientChange: ((clientKeySelected: string) => void ) | undefined;\n\n  @queryAll('details')\n  protected allDetailsElements!: Array<HTMLDetailsElement>;\n\n  @queryAll('a')\n  protected allNavLinks!: Array<HTMLAnchorElement>;\n\n  @state()\n  private sidebarOpen = true;\n\n  protected firstUpdated() {\n    this.setActiveState();\n  }\n\n  /*\n   * Set the active state for the current page.\n   *\n   * This function iterates over all nav links and compares the current URL path with the href of each link.\n   * If the current URL path starts with the href of a link, the link is marked as active. If multiple links\n   * share the same prefix, the longest prefix is used as it is more specific.\n   *\n   * Example:\n   * - Current URL: /channels/123\n   * - Nav links:\n   *   - /channels\n   *   - /channels/123\n   *   - /channels/456\n   *\n   * Loop 1: currentPath = /channels/123, linkPath = /channels, bestMatch = /channels\n   * Loop 2: currentPath = /channels/123, linkPath = /channels/123, bestMatch = /channels/123\n   * Loop 3: currentPath = /channels/123, linkPath = /channels/456, bestMatch = /channels/123\n   * Result: /channels/123 is marked as active\n   *\n   */\n  private setActiveState = () => {\n    const currentPath = window.location.pathname;\n\n    let bestMatch: HTMLAnchorElement | undefined;\n    let bestMatchLength = 0;\n\n    // Check special cases first, as everything will always match on / and return Dashboard\n    if (this.activeRoute === Routes.CampaignManager) {\n      const links = Object.values(this.allNavLinks);\n      bestMatch = links.find(link => link.id === Routes.CampaignManager);\n    }\n\n    if (!bestMatch && this.clientKey) {\n      const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');\n      const mappedUrl = urlMappings[parsedPath];\n\n      if (mappedUrl) {\n        const links = Object.values(this.allNavLinks);\n        bestMatch = links.find(link => link.href.includes(mappedUrl));\n      }\n    }\n\n    if (!bestMatch) {\n      for (const link of this.allNavLinks) {\n        link.classList.remove('current-page');\n        if (link.hasAttribute('aria-current')) {\n          link.attributes.removeNamedItem('aria-current');\n        }\n\n        const linkPath = new URL(link.href).pathname;\n\n        if (currentPath.startsWith(linkPath)) {\n          if (linkPath.length > bestMatchLength) {\n            bestMatch = link;\n            bestMatchLength = linkPath.length;\n          }\n        }\n      }\n    }\n\n    if (bestMatch) {\n      bestMatch.classList.add('current-page');\n      bestMatch.setAttribute('aria-current', 'page');\n    } else {\n      console.error(`No matching nav link found for path: ${currentPath}`);\n    }\n  };\n\n  private closeAllDetails = (element?: HTMLDetailsElement) => {\n    this.allDetailsElements.forEach(detail => {\n      if (element && !detail.contains(element)) {\n        detail.removeAttribute('open');\n      } else if (!element) {\n        detail.removeAttribute('open');\n      }\n    });\n  };\n\n  private toggleSidebar = () => {\n    this.closeAllDetails();\n    this.sidebarOpen = !this.sidebarOpen;\n  };\n\n  private handleToggle = (e: ToggleEvent) => {\n    const { newState } = e;\n    const target = e.currentTarget as HTMLDetailsElement;\n\n    if (newState === 'open') {\n      if (!this.sidebarOpen) {\n        this.sidebarOpen = true;\n      }\n\n      this.closeAllDetails(target);\n    }\n  };\n\n  private buildUrl = (path: string): string => {\n    if (!this.clientKey) throw new Error('clientKey is required');\n\n    const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);\n    if (!this.platformUrl) return formattedPath;\n\n    return new URL(formattedPath, this.platformUrl).toString();\n  };\n\n  private onAnchorClick = (e: MouseEvent) => {\n    if (this.navigate) {\n      this.navigate(e);\n      this.setActiveState();\n    }\n  };\n\n  private handleClientChange = (e: Event) => {\n    const combobox = e.target as any;\n    const selectedClientKey = combobox.value?.[0];\n\n    if (selectedClientKey && this.onClientChange) {\n      this.onClientChange(selectedClientKey);\n    }\n  };\n\n  render() {\n    return html`\n      <nav id=${this.id} class=\"${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n        <div class=\"sidebar-header ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <div class=\"logo\">\n            ${unsafeSVG(tripteaseLogo)}\n          </div>\n          <button id=\"navbar-toggle-btn\" class=\"nav-item nav-toggle-button\" @click=${this.toggleSidebar}>\n            ${unsafeSVG(sidebarCollapsed)}\n            <span class=\"tooltip nav-toggle-tooltip\">\n              ${unsafeSVG(sidebarCollapsed)}\n              <span>Collapse sidebar</span>\n            </span>\n          </button>\n        </div>\n\n        <div class=\"nav-items ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(home)}<span>Dashboard</span></a\n          >\n          <a id=\"${Routes.CampaignManager}\" class=\"nav-item\" href=${this.campaignManagerUrl}\n          >${unsafeSVG(campaigns)}<span>Campaigns</span></a\n          >\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/channels')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(channels)}<span>Channels</span></a\n          >\n          <details id=\"market-insights\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(graph)}\n              <span>Market Insights</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/parity/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Parity monitoring</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Guest insights</a\n              >\n            </div>\n          </details>\n          <details id=\"settings\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(gear)}\n              <span>Settings</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}\n                @click=${this.onAnchorClick}\n              >Email setup</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/crm-config')}\n                @click=${this.onAnchorClick}\n              >CRM connectivity</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/$CLIENT_KEY/guides')}\n                @click=${this.onAnchorClick}\n              >Group settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/$CLIENT_KEY/hotels')}\n                @click=${this.onAnchorClick}\n              >Property settings</a\n              >\n            </div>\n          </details>\n          <hr />\n          <details id=\"account\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(user)}\n              <span>Account</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account')}\n                @click=${this.onAnchorClick}\n              >User settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/team/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Team and permissions</a\n              >\n            </div>\n          </details>\n          <details id=\"billing-routes\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(wallet)}\n              <span>Billing</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div>\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Booking reconciliation</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Subscriptions</a\n              >\n            </div>\n          </details>\n        </div>\n        <div class=\"tertiary-nav ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <div id=\"external-links\" class=\"nav-items\">\n            <a\n              class=\"nav-item external-link\"\n              href='https://triptease.canny.io/feature-requests'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Feature requests\n              ${unsafeSVG(external)}\n            </a>\n            <a\n              class='nav-item external-link'\n              href='https://triptease.canny.io/changelog'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Product updates\n              ${unsafeSVG(external)}\n            </a>\n            <a\n              class='nav-item external-link'\n              href='https://help.triptease.com/'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Help center\n              ${unsafeSVG(external)}\n            </a>\n            <hr />\n          </div>\n          <div class='nav-items'>\n            <div id=\"client-selector\">\n              ${this.clients.length > 1 ? html`\n                <tt-combobox\n                  .openUpward=${true}\n                  .value=${this.clientKey ? [this.clientKey] : []}\n                  @change=${this.handleClientChange}\n                >\n                  ${this.clients.map((client) => html`\n                    <option slot=\"option\" value=${client.clientKey}>\n                      ${client.displayName}\n                    </option>\n                  `)}\n                </tt-combobox>\n              ` : html`\n                <div class=\"single-client-name\">\n                  ${this.clients.find((m) => m.clientKey === this.clientKey)?.displayName}\n                </div>\n              `}\n            </div>\n            <a\n              id=\"logout-link\"\n              class=\"nav-item\"\n              href=${this.buildUrl('/logout')}\n              @click=${this.onAnchorClick}\n            >${unsafeSVG(logout)}<span>Logout</span></a>\n          </div>\n      </nav>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport {\n  campaigns,\n  channels,\n  chevronDown,\n  external,\n  gear,\n  graph,\n  home,\n  logout,\n  sidebarCollapsed,\n  user,\n  wallet\n} from '@triptease/icons';\nimport '@triptease/tt-combobox';\nimport { styles } from './styles.js';\nimport { tripteaseLogo } from './triptease-logo.js';\nimport { urlMappings } from './urlMappings.js';\nimport { Routes } from './Routes.js';\n\nconst jsonArrayConverter = (value: string | null) => {\n  if (!value) return [];\n  try {\n    return JSON.parse(value);\n  } catch {\n    return [];\n  }\n};\n\nexport class TtNavbar extends LitElement {\n  static styles = styles;\n\n  @property({ type: Function })\n  navigate: ((e: MouseEvent) => void) | undefined;\n\n  @property({ type: String, attribute: 'campaign-manager-url' })\n  campaignManagerUrl: string = 'https://app.campaign-manager.triptease.io';\n\n  @property({ type: String, attribute: 'platform-url' })\n  platformUrl?: string;\n\n  @property({ type: String, attribute: 'client-key' })\n  clientKey?: string;\n\n  @property({ type: String, attribute: 'active-route' })\n  activeRoute?: keyof typeof Routes;\n\n  @property({ type: Array, converter: jsonArrayConverter })\n  clients: { clientKey: string; displayName: string }[] = [];\n\n  @property({ type: Object })\n  onClientChange: ((clientKeySelected: string) => void ) | undefined;\n\n  @queryAll('details')\n  protected allDetailsElements!: Array<HTMLDetailsElement>;\n\n  @queryAll('a')\n  protected allNavLinks!: Array<HTMLAnchorElement>;\n\n  @state()\n  private sidebarOpen = true;\n\n  protected firstUpdated() {\n    this.setActiveState();\n  }\n\n  public connectedCallback() {\n\n    window.addEventListener('popstate', this.setActiveState);\n    super.connectedCallback();\n  }\n\n  public disconnectedCallback() {\n\n    window.removeEventListener('popstate', this.setActiveState);\n    super.disconnectedCallback();\n  }\n\n  /*\n   * Set the active state for the current page.\n   *\n   * This function iterates over all nav links and compares the current URL path with the href of each link.\n   * If the current URL path starts with the href of a link, the link is marked as active. If multiple links\n   * share the same prefix, the longest prefix is used as it is more specific.\n   *\n   * Example:\n   * - Current URL: /channels/123\n   * - Nav links:\n   *   - /channels\n   *   - /channels/123\n   *   - /channels/456\n   *\n   * Loop 1: currentPath = /channels/123, linkPath = /channels, bestMatch = /channels\n   * Loop 2: currentPath = /channels/123, linkPath = /channels/123, bestMatch = /channels/123\n   * Loop 3: currentPath = /channels/123, linkPath = /channels/456, bestMatch = /channels/123\n   * Result: /channels/123 is marked as active\n   *\n   */\n  private setActiveState = () => {\n    const currentPath = window.location.pathname;\n\n    let bestMatch: HTMLAnchorElement | undefined;\n    let bestMatchLength = 0;\n\n    // Check special cases first, as everything will always match on / and return Dashboard\n    if (this.activeRoute === Routes.CampaignManager) {\n      const links = Object.values(this.allNavLinks);\n      bestMatch = links.find(link => link.id === Routes.CampaignManager);\n    }\n\n    if (!bestMatch && this.clientKey) {\n      const parsedPath = currentPath.replace(this.clientKey, '$CLIENT_KEY');\n      const mappedUrl = urlMappings[parsedPath];\n\n      if (mappedUrl) {\n        const links = Object.values(this.allNavLinks);\n        bestMatch = links.find(link => link.href.includes(mappedUrl));\n      }\n    }\n\n    if (!bestMatch) {\n      for (const link of this.allNavLinks) {\n        link.classList.remove('current-page');\n        if (link.hasAttribute('aria-current')) {\n          link.attributes.removeNamedItem('aria-current');\n        }\n\n        const linkPath = new URL(link.href).pathname;\n\n        if (currentPath.startsWith(linkPath)) {\n          if (linkPath.length > bestMatchLength) {\n            bestMatch = link;\n            bestMatchLength = linkPath.length;\n          }\n        }\n      }\n    }\n\n    if (bestMatch) {\n      bestMatch.classList.add('current-page');\n      bestMatch.setAttribute('aria-current', 'page');\n    } else {\n      console.error(`No matching nav link found for path: ${currentPath}`);\n    }\n  };\n\n  private closeAllDetails = (element?: HTMLDetailsElement) => {\n    this.allDetailsElements.forEach(detail => {\n      if (element && !detail.contains(element)) {\n        detail.removeAttribute('open');\n      } else if (!element) {\n        detail.removeAttribute('open');\n      }\n    });\n  };\n\n  private toggleSidebar = () => {\n    this.closeAllDetails();\n    this.sidebarOpen = !this.sidebarOpen;\n  };\n\n  private handleToggle = (e: ToggleEvent) => {\n    const { newState } = e;\n    const target = e.currentTarget as HTMLDetailsElement;\n\n    if (newState === 'open') {\n      if (!this.sidebarOpen) {\n        this.sidebarOpen = true;\n      }\n\n      this.closeAllDetails(target);\n    }\n  };\n\n  private buildUrl = (path: string): string => {\n    if (!this.clientKey) throw new Error('clientKey is required');\n\n    const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);\n    if (!this.platformUrl) return formattedPath;\n\n    return new URL(formattedPath, this.platformUrl).toString();\n  };\n\n  private onAnchorClick = (e: MouseEvent) => {\n    if (this.navigate) {\n      this.navigate(e);\n      this.setActiveState();\n    }\n  };\n\n  private handleClientChange = (e: Event) => {\n    const combobox = e.target as any;\n    const selectedClientKey = combobox.value?.[0];\n\n    if (selectedClientKey && this.onClientChange) {\n      this.onClientChange(selectedClientKey);\n    }\n  };\n\n  render() {\n    return html`\n      <nav id=${this.id} class=\"${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n        <div class=\"sidebar-header ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <div class=\"logo\">\n            ${unsafeSVG(tripteaseLogo)}\n          </div>\n          <button id=\"navbar-toggle-btn\" class=\"nav-item nav-toggle-button\" @click=${this.toggleSidebar}>\n            ${unsafeSVG(sidebarCollapsed)}\n            <span class=\"tooltip nav-toggle-tooltip\">\n              ${unsafeSVG(sidebarCollapsed)}\n              <span>Collapse sidebar</span>\n            </span>\n          </button>\n        </div>\n\n        <div class=\"nav-items ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(home)}<span>Dashboard</span></a\n          >\n          <a id=\"${Routes.CampaignManager}\" class=\"nav-item\" href=${this.campaignManagerUrl}\n          >${unsafeSVG(campaigns)}<span>Campaigns</span></a\n          >\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/channels')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(channels)}<span>Channels</span></a\n          >\n          <details id=\"market-insights\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(graph)}\n              <span>Market Insights</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/parity/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Parity monitoring</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Guest insights</a\n              >\n            </div>\n          </details>\n          <details id=\"settings\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(gear)}\n              <span>Settings</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}\n                @click=${this.onAnchorClick}\n              >Email setup</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/crm-config')}\n                @click=${this.onAnchorClick}\n              >CRM connectivity</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/$CLIENT_KEY/guides')}\n                @click=${this.onAnchorClick}\n              >Group settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/$CLIENT_KEY/hotels')}\n                @click=${this.onAnchorClick}\n              >Property settings</a\n              >\n            </div>\n          </details>\n          <hr />\n          <details id=\"account\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(user)}\n              <span>Account</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account')}\n                @click=${this.onAnchorClick}\n              >User settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/team/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Team and permissions</a\n              >\n            </div>\n          </details>\n          <details id=\"billing-routes\" @toggle=${this.handleToggle}>\n            <summary>\n              ${unsafeSVG(wallet)}\n              <span>Billing</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div>\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Booking reconciliation</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Subscriptions</a\n              >\n            </div>\n          </details>\n        </div>\n        <div class=\"tertiary-nav ${this.sidebarOpen ? '' : 'sidebar-closed'}\">\n          <div id=\"external-links\" class=\"nav-items\">\n            <a\n              class=\"nav-item external-link\"\n              href='https://triptease.canny.io/feature-requests'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Feature requests\n              ${unsafeSVG(external)}\n            </a>\n            <a\n              class='nav-item external-link'\n              href='https://triptease.canny.io/changelog'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Product updates\n              ${unsafeSVG(external)}\n            </a>\n            <a\n              class='nav-item external-link'\n              href='https://help.triptease.com/'\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              Help center\n              ${unsafeSVG(external)}\n            </a>\n            <hr />\n          </div>\n          <div class='nav-items'>\n            <div id=\"client-selector\">\n              ${this.clients.length > 1 ? html`\n                <tt-combobox\n                  .openUpward=${true}\n                  .value=${this.clientKey ? [this.clientKey] : []}\n                  @change=${this.handleClientChange}\n                >\n                  ${this.clients.map((client) => html`\n                    <option slot=\"option\" value=${client.clientKey}>\n                      ${client.displayName}\n                    </option>\n                  `)}\n                </tt-combobox>\n              ` : html`\n                <div class=\"single-client-name\">\n                  ${this.clients.find((m) => m.clientKey === this.clientKey)?.displayName}\n                </div>\n              `}\n            </div>\n            <a\n              id=\"logout-link\"\n              class=\"nav-item\"\n              href=${this.buildUrl('/logout')}\n              @click=${this.onAnchorClick}\n            >${unsafeSVG(logout)}<span>Logout</span></a>\n          </div>\n      </nav>\n    `;\n  }\n}\n"]}

package/dist/web/Routes.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.27
+* @triptease/tt-navbar v0.0.28
 */
 
 // src/Routes.ts

package/dist/web/TtNavbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.27
+* @triptease/tt-navbar v0.0.28
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -2127,6 +2127,14 @@ var TtNavbar = class extends i4 {
   firstUpdated() {
     this.setActiveState();
   }
+  connectedCallback() {
+    window.addEventListener("popstate", this.setActiveState);
+    super.connectedCallback();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("popstate", this.setActiveState);
+    super.disconnectedCallback();
+  }
   render() {
     return x`
       <nav id=${this.id} class="${this.sidebarOpen ? "" : "sidebar-closed"}">