@triptease/tt-navbar 0.0.17 → 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.17",
+  "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 => {

package/test/tt-navbar.test.ts

@@ -234,4 +234,28 @@ describe('TtNavbar', () => {
       });
     });
   });
+
+  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);
+    });
+  });
 });