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

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -41,7 +41,8 @@
   import NavSectionList from './NavSectionList';
   import { termList, matches } from '~/common/DocsFilter/utils';
   import tableOfContents from '~/tableOfContents.js';
-
+  import debounce from 'lodash/debounce';
+
   export default {
     name: 'SideNav',
     components: {
@@ -51,6 +52,7 @@
       return {
         filterText: '',
         loaded: false,
+        debounceUpdateQuery: null,
       };
     },
     computed: {
@@ -80,22 +82,62 @@
     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: {} });
         }
-      },
-    },
-    mounted() {
-      if (window) {
-        const filterText = window.sessionStorage.getItem('nav-filter');
-        if (filterText) {
-          this.filterText = filterText;
+        else {
+          //else ,update the filter query param
+          this.$router.push({ path: this.$route.path, query: { ...this.$route.query, filter: newValue}});
+        }
+        this.debouncedUpdateQuery(newValue);
         }
-        this.$refs.links.scrollTop = window.sessionStorage.getItem('nav-scroll');
       }
-      // don't show the nav until the state is set
-      this.loaded = true;
     },
-    methods: {
+   mounted() {
+    if (window) {
+    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
+    }
+
+  // Modify navigation links to preserve the filter query
+  this.$nextTick(() => {
+    this.$refs.links.querySelectorAll('a').forEach((link) => {
+      link.addEventListener('click', (event) => {
+        event.preventDefault();
+        const href = new URL(link.href);
+        this.$router.push({
+          path: href.pathname,
+          query: { ...this.$route.query } // Add existing query params to the new path
+        });
+      });
+    });
+  });
+  //  Don't show the nav until the state is set
+  this.loaded = true;
+},
+     methods: {
       throttleHandleScroll: throttle(function handleScroll() {
         window.sessionStorage.setItem('nav-scroll', this.$refs.links.scrollTop);
       }, 100),