@kodaris/krubble-app-components 1.0.38 → 1.0.40

package/dist/krubble-app.umd.js

@@ -2243,9 +2243,23 @@
            */
           this.navItems = [];
           /**
-           * Currently active item ID
+           * Currently active item ID. Auto-detected from the URL by default.
+           * Can be set explicitly by the parent to override.
            */
           this.activeId = '';
+          this.handlePopstate = () => {
+              this.syncActiveFromUrl();
+          };
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          // Defer so property bindings (.navItems) have been applied
+          requestAnimationFrame(() => this.syncActiveFromUrl());
+          window.addEventListener('popstate', this.handlePopstate);
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          window.removeEventListener('popstate', this.handlePopstate);
       }
       /**
        * Handles click events on navigation items.
@@ -2274,6 +2288,24 @@
           if (navEvent.defaultPrevented) {
               e.preventDefault();
           }
+          this.activeId = item.id;
+      }
+      syncActiveFromUrl() {
+          const pathname = window.location.pathname;
+          const match = this.navItems.find((item) => {
+              if (!item.url) {
+                  return false;
+              }
+              // Absolute URL — exact match
+              if (item.url.startsWith('/')) {
+                  return pathname === item.url;
+              }
+              // Relative URL — match against the end of the pathname
+              return pathname.endsWith('/' + item.url);
+          });
+          if (match) {
+              this.activeId = match.id;
+          }
       }
       render() {
           return b `
@@ -2316,8 +2348,8 @@
 
     .nav {
       width: 200px;
-      background: #F3F7FC;
-      //border-right: 1px solid #000000;
+      background: white;
+      border-right: 1px solid #e5e7eb;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
@@ -2334,7 +2366,7 @@
     }
 
     .nav-header__title {
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 600;
       color: #111827;
       white-space: nowrap;