@triptease/tt-navbar 0.0.17 → 0.0.18

package/dist/web/index.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.17
+* @triptease/tt-navbar v0.0.18
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1064,6 +1064,48 @@ var TtNavbar = class extends i4 {
   constructor() {
     super(...arguments);
     this.sidebarOpen = true;
+    /*
+     * 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
+     *
+     */
+    this.setActiveState = () => {
+      const currentPath = window.location.pathname;
+      let bestMatch;
+      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");
+      }
+    };
     this.closeAllDetails = (element) => {
       this.allDetailsElements.forEach((detail) => {
         if (element && !detail.contains(element)) {
@@ -1099,6 +1141,9 @@ var TtNavbar = class extends i4 {
       }
     };
   }
+  firstUpdated() {
+    this.setActiveState();
+  }
   render() {
     return x`
       <nav id=${this.id} class="${this.sidebarOpen ? "" : "sidebar-closed"}">
@@ -1284,12 +1329,15 @@ __decorateClass([
 __decorateClass([
   n4({ type: String, attribute: "client-key" })
 ], TtNavbar.prototype, "clientKey", 2);
-__decorateClass([
-  r5()
-], TtNavbar.prototype, "sidebarOpen", 2);
 __decorateClass([
   r6("details")
 ], TtNavbar.prototype, "allDetailsElements", 2);
+__decorateClass([
+  r6("a")
+], TtNavbar.prototype, "allNavLinks", 2);
+__decorateClass([
+  r5()
+], TtNavbar.prototype, "sidebarOpen", 2);
 export {
   TtNavbar
 };