Enhanced Active Tab Detection for Nova Cards with URL Filter Support

resources/js/components/ResourceNavigationLink.vue

@@ -29,14 +29,49 @@
 </template>
 
 <script>
+    import { ref, onMounted, onUnmounted } from 'vue';
 
     export default {
         props: [ 'card' ],
         setup() {
+          const currentSearch = ref(window.location.search);
+
+          const checkSearchChange = () => {
+            const search = window.location.search;
+            if (currentSearch.value !== search) {
+              currentSearch.value = search;
+            }
+          };
+
+          const decodeFilters = (link) => {
+            const params = new URLSearchParams(currentSearch.value);
+            const encoded = params.get(`${link.uriKey}_filter`);
+            return encoded ? JSON.parse(atob(encoded)) : null;
+          };
+
+          const isLinkActive = (link) => {
+            const filters = decodeFilters(link);
+            if (!filters || !link.activeFilter || !link.activeValue) return window.location.pathname.endsWith(link.url);
+            return filters.some(filter => {
+              const key = Object.keys(filter)[0];
+              const value = filter[key];
+              return key === link.activeFilter && value == link.activeValue;
+            });
+          };
+
+          onMounted(() => {
+            Nova.$on('filter-changed', checkSearchChange)
+            Nova.$on('filter-reset', checkSearchChange)
+          });
+
+          onUnmounted(() => {
+            Nova.$off('filter-changed', checkSearchChange)
+            Nova.$off('filter-reset', checkSearchChange)
+          });
 
             return {
                 component: link => link.external ? 'a' : 'Link',
-                active: link => window.location.pathname.endsWith(link.url),
+                active: link => isLinkActive(link),
                 target: link => link.openInNewTab ? '_blank' : '_self'
             }