Updating browser history integration with the navigation Table of Contents (ToC) filter

docs/common/DocsLibraryLink.vue

@@ -1,8 +1,8 @@
 <template>
 
-  <a :href="'/' + component.toLowerCase()">
+  <router-link :to="computedLink">
     <code>{{ component }}</code>
-  </a>
+  </router-link>
 
 </template>
 
@@ -17,6 +17,15 @@
         required: true,
       },
     },
+    computed: {
+      computedLink() {
+        // Preserve query parameters in the link
+        return {
+          path: '/' + this.component.toLowerCase(),
+          query: { ...this.$route.query },
+        };
+      },
+    },
   };
 
 </script>

docs/common/DocsPageTemplate/SideNav/NavLink.vue

@@ -7,14 +7,15 @@
   >
     {{ page.title }}
   </div>
-  <a
+  <router-link
     v-else
+    :to="computedLink"
     class="block enabled-link"
     :href="page.path"
     :class="{ 'current-page': currentPage, code: page.isCode }"
   >
     {{ page.title }}
-  </a>
+  </router-link>
 
 </template>
 
@@ -39,6 +40,13 @@
       currentPage() {
         return this.page.path === this.$route.path;
       },
+      computedLink() {
+        // Preserve query parameters in the link
+        return {
+          path: this.page.path,
+          query: { ...this.$route.query },
+        };
+      },
     },
   };
 

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -38,6 +38,7 @@
 <script>
 
   import throttle from 'lodash/throttle';
+  import debounce from 'lodash/debounce';
   import NavSectionList from './NavSectionList';
   import { termList, matches } from '~/common/DocsFilter/utils';
   import tableOfContents from '~/tableOfContents.js';
@@ -51,6 +52,7 @@
       return {
         filterText: '',
         loaded: false,
+        debounceUpdateQuery: null,
       };
     },
     computed: {
@@ -77,22 +79,54 @@
         return toc;
       },
     },
+
     watch: {
       filterText(newValue) {
         if (window) {
-          window.sessionStorage.setItem('nav-filter', newValue);
+          //Clear the filter query when filtertext is empty
+          if (!newValue) {
+            this.$router.replace({ path: this.$route.path, query: {} });
+          } else {
+            //else ,update the filter query param
+            this.$router.push({
+              path: this.$route.path,
+              query: { ...this.$route.query, filter: newValue },
+            });
+          }
+          this.debouncedUpdateQuery(newValue);
         }
       },
     },
     mounted() {
       if (window) {
-        const filterText = window.sessionStorage.getItem('nav-filter');
-        if (filterText) {
-          this.filterText = filterText;
+        const { filter } = this.$route.query;
+        // Set filterText from the query parameter if it exists
+        if (filter) {
+          this.filterText = filter;
         }
         this.$refs.links.scrollTop = window.sessionStorage.getItem('nav-scroll');
+        // Restoring filter state when a user navigates back
+        window.addEventListener('popstate', event => {
+          if (event.state && 'filterText' in event.state) {
+            this.filterText = event.state.filterText;
+          } else {
+            this.filterText = ''; // Reset if no filterText is in state
+          }
+        });
+        // Create debounced function for updating the query
+        this.debouncedUpdateQuery = debounce(newValue => {
+          if (newValue) {
+            this.$router.push({
+              path: this.$route.path,
+              query: { ...this.$route.query, filter: newValue },
+            });
+          } else {
+            this.$router.push({ path: this.$route.path, query: {} });
+          }
+        }, 2000); // 2-second debounce delay
       }
-      // don't show the nav until the state is set
+
+      //  Don't show the nav until the state is set
       this.loaded = true;
     },
     methods: {