@triptease/tt-navbar 0.0.32 → 0.0.34

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.32
+* @triptease/tt-navbar v0.0.34
 */
 
 // 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.32",
+  "version": "0.0.34",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/src/TtNavbar.ts

@@ -141,6 +141,12 @@ export class TtNavbar extends LitElement {
     if (bestMatch) {
       bestMatch.classList.add('current-page');
       bestMatch.setAttribute('aria-current', 'page');
+
+      // Auto-expand parent details if the active link is within a collapsible section
+      const parentDetails = bestMatch.closest('details');
+      if (parentDetails) {
+        parentDetails.setAttribute('open', '');
+      }
     } else {
       console.error(`No matching nav link found for path: ${currentPath}`);
     }
@@ -227,7 +233,7 @@ export class TtNavbar extends LitElement {
           >
           <a
             class="nav-item"
-            href=${this.buildUrl('/channels')}
+            href=${this.buildUrl('/$CLIENT_KEY/channels')}
             @click=${this.onAnchorClick}
           >${unsafeSVG(channels)}<span>Channels</span></a
           >

package/test/tt-navbar.test.ts

@@ -61,7 +61,7 @@ describe('TtNavbar', () => {
       expect(getLinkByHref(links, '/')).to.exist;
       expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
         .to.exist;
-      expect(getLinkByHref(links, '/channels')).to.exist;
+      expect(getLinkByHref(links, `/${CLIENT_KEY}/channels`)).to.exist;
       expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;
       expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;
       expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to
@@ -88,7 +88,7 @@ describe('TtNavbar', () => {
       expect(getLinkByHref(links, `${platformUrl}/`)).to.exist;
       expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))
         .to.exist; // This shouldn't change
-      expect(getLinkByHref(links, `${platformUrl}/channels`)).to.exist;
+      expect(getLinkByHref(links, `${platformUrl}/${CLIENT_KEY}/channels`)).to.exist;
     }
   });
 
@@ -266,7 +266,7 @@ describe('TtNavbar', () => {
 
   const URLs = [
     ['/', 'Dashboard'],
-    ['/channels', 'Channels'],
+    [`/${CLIENT_KEY}/channels`, 'Channels'],
     [`/parity/${CLIENT_KEY}`, 'Parity'],
     [`/parity/${CLIENT_KEY}`, 'Parity'],
     [`/parity/${CLIENT_KEY}/foo`, 'Parity'],
@@ -318,7 +318,6 @@ describe('TtNavbar', () => {
     ];
     navbar.onClientChange = onClientChange;
 
-    console.log(getComputedStyle(navbar).getPropertyValue('--nav-bar-width'));
     await navbar.updateComplete;
 
     const combobox = navbar.shadowRoot?.querySelector('tt-combobox');
@@ -346,4 +345,18 @@ describe('TtNavbar', () => {
     await expect(getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim()).to.equal('fit-content');
 
   });
+
+  it('should expand the details when the current page is within that section', async () => {
+    // eslint-disable-next-line no-restricted-globals
+    history.pushState({}, '', `/parity/${CLIENT_KEY}`);
+
+    const navbar = await fixture<TtNavbar>(
+      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`
+    );
+
+    const marketInsightsDetails = navbar.shadowRoot!.querySelector('#market-insights') as HTMLDetailsElement;
+
+    expect(marketInsightsDetails).to.exist;
+    expect(marketInsightsDetails.open).to.be.true;
+  })
 });