@triptease/tt-navbar 0.0.15 → 0.0.18

package/package.json

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

package/src/TtNavbar.ts

@@ -29,11 +29,66 @@ export class TtNavbar extends LitElement {
   @property({ type: String, attribute: 'client-key' })
   clientKey?: string;
 
+  @queryAll('details')
+  protected allDetailsElements!: Array<HTMLDetailsElement>;
+
+  @queryAll('a')
+  protected allNavLinks!: Array<HTMLAnchorElement>;
+
   @state()
   private sidebarOpen = true;
 
-  @queryAll('details')
-  protected allDetailsElements!: Array<HTMLDetailsElement>;
+  protected firstUpdated() {
+    this.setActiveState();
+  }
+
+  /*
+   * Set the active state for the current page.
+   *
+   * This function iterates over all nav links and compares the current URL path with the href of each link.
+   * If the current URL path starts with the href of a link, the link is marked as active. If multiple links
+   * share the same prefix, the longest prefix is used as it is more specific.
+   *
+   * Example:
+   * - Current URL: /channels/123
+   * - Nav links:
+   *   - /channels
+   *   - /channels/123
+   *   - /channels/456
+   *
+   * Loop 1: currentPath = /channels/123, linkPath = /channels, bestMatch = /channels
+   * Loop 2: currentPath = /channels/123, linkPath = /channels/123, bestMatch = /channels/123
+   * Loop 3: currentPath = /channels/123, linkPath = /channels/456, bestMatch = /channels/123
+   * Result: /channels/123 is marked as active
+   *
+   */
+  private setActiveState = () => {
+    const currentPath = window.location.pathname;
+
+    let bestMatch: HTMLAnchorElement | undefined;
+    let bestMatchLength = 0;
+
+    for (const link of this.allNavLinks) {
+      link.classList.remove('current-page');
+      if (link.hasAttribute('aria-current')) {
+        link.attributes.removeNamedItem('aria-current');
+      }
+
+      const linkPath = new URL(link.href).pathname;
+
+      if (currentPath.startsWith(linkPath)) {
+        if (linkPath.length > bestMatchLength) {
+          bestMatch = link;
+          bestMatchLength = linkPath.length;
+        }
+      }
+    }
+
+    if (bestMatch) {
+      bestMatch.classList.add('current-page');
+      bestMatch.setAttribute('aria-current', 'page');
+    }
+  };
 
   private closeAllDetails = (element?: HTMLDetailsElement) => {
     this.allDetailsElements.forEach(detail => {
@@ -152,13 +207,13 @@ export class TtNavbar extends LitElement {
               >
               <a
                 class="sub-nav-item"
-                href=${this.buildUrl('/settings/group')}
+                href=${this.buildUrl('/settings/$CLIENT_KEY/guides')}
                 @click=${this.onAnchorClick}
               >Group settings</a
               >
               <a
                 class="sub-nav-item"
-                href=${this.buildUrl('/settings/$CLIENT_KEY/hotels/')}
+                href=${this.buildUrl('/settings/$CLIENT_KEY/hotels')}
                 @click=${this.onAnchorClick}
               >Property settings</a
               >

package/test/tt-navbar.test.ts

@@ -63,8 +63,8 @@ describe('TtNavbar', () => {
       expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to
         .exist;
       expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;
-      expect(getLinkByHref(links, `/settings/group`)).to.exist;
-      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels/`)).to.exist;
+      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/guides`)).to.exist;
+      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels`)).to.exist;
       expect(getLinkByHref(links, `/account`)).to.exist;
       expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;
       expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`))
@@ -229,7 +229,33 @@ describe('TtNavbar', () => {
 
       element!.click();
 
-      await waitUntil(() => logo?.checkVisibility(), "navbar should be open", { timeout: 500 });
+      await waitUntil(() => logo?.checkVisibility(), 'navbar should be open', {
+        timeout: 500,
+      });
+    });
+  });
+
+  const URLs = [
+    ['/', 'Dashboard'],
+    ['/channels', 'Channels'],
+    [`/parity/${CLIENT_KEY}`, 'Parity'],
+    [`/parity/${CLIENT_KEY}`, 'Parity'],
+    [`/parity/${CLIENT_KEY}/foo`, 'Parity'],
+  ];
+
+  URLs.forEach(([route, text]) => {
+    it(`should show the current page as active when link is ${route}`, async () => {
+      // eslint-disable-next-line no-restricted-globals
+      history.pushState({}, '', route); // 👈 mock URL
+
+      const navbar = await fixture<TtNavbar>(
+        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,
+      );
+
+      const anchor = navbar.shadowRoot!.querySelector('a[aria-current="page"]');
+
+      expect(anchor).to.exist;
+      expect(anchor!.textContent).to.include(text);
     });
   });
 });