@triptease/tt-navbar 0.0.20 → 0.0.21

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.20
+* @triptease/tt-navbar v0.0.21
 */
 
 // src/urlMappings.ts

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/Routes.ts

@@ -0,0 +1,5 @@
+const Routes = {
+  CampaignManager: 'CampaignManager',
+};
+
+export { Routes };

package/src/TtNavbar.ts

@@ -17,6 +17,7 @@ import {
 import { styles } from './styles.js';
 import { tripteaseLogo } from './triptease-logo.js';
 import { urlMappings } from './urlMappings.js';
+import { Routes } from './Routes.js';
 
 export class TtNavbar extends LitElement {
   static styles = styles;
@@ -33,6 +34,9 @@ export class TtNavbar extends LitElement {
   @property({ type: String, attribute: 'client-key' })
   clientKey?: string;
 
+  @property({ type: String, attribute: 'active-route' })
+  activeRoute?: keyof typeof Routes;
+
   @queryAll('details')
   protected allDetailsElements!: Array<HTMLDetailsElement>;
 
@@ -73,12 +77,9 @@ export class TtNavbar extends LitElement {
     let bestMatchLength = 0;
 
     // Check special cases first, as everything will always match on / and return Dashboard
-
-    if (this.campaignManagerUrl.includes(window.location.host)) {
+    if (this.activeRoute === Routes.CampaignManager) {
       const links = Object.values(this.allNavLinks);
-      bestMatch = links.find(link =>
-        link.href.includes(this.campaignManagerUrl),
-      );
+      bestMatch = links.find(link => link.id === Routes.CampaignManager);
     }
 
     if (!bestMatch && this.clientKey) {
@@ -184,7 +185,7 @@ export class TtNavbar extends LitElement {
             @click=${this.onAnchorClick}
           >${unsafeSVG(home)}<span>Dashboard</span></a
           >
-          <a class="nav-item" href=${this.campaignManagerUrl}
+          <a id="${Routes.CampaignManager}" class="nav-item" href=${this.campaignManagerUrl}
           >${unsafeSVG(campaigns)}<span>Campaigns</span></a
           >
           <a

package/src/index.ts

@@ -1 +1,2 @@
 export { TtNavbar } from './TtNavbar.js';
+export { Routes } from './Routes.js';

package/test/tt-navbar.test.ts

@@ -7,6 +7,7 @@ import {
   waitUntil,
 } from '@open-wc/testing';
 import { TtNavbar } from '../src/index.js';
+import { Routes } from '../src/Routes.js';
 
 // eslint-disable-next-line no-undef
 const getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {
@@ -267,7 +268,7 @@ describe('TtNavbar', () => {
     const campaignManagerUrl = 'http://localhost:8000';
 
     const navbar = await fixture<TtNavbar>(
-      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl}></tt-navbar>`,
+      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route="${Routes.CampaignManager}"></tt-navbar>`,
     );
     const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
     expect(anchor).to.exist;