Add active class in sidebar title list to "lvl0" DocSearch config

Author: ktquez

src/.vuepress/theme/components/TheSidebar.vue

@@ -20,7 +20,8 @@
       <template v-for="(nav, index) in items">
         <span
           :key="`nav-heading-${index}`"
-          class="mt-12 ml-4 text-xl font-bold sidebar__title-list bg-primary"
+          class="mt-12 ml-4 text-xl font-bold bg-primary"
+          :class="{ 'sidebar__title-list--active': sidebarTitleActive === nav.title }"
         >
           {{ nav.title }}
         </span>
@@ -88,7 +89,7 @@
 </template>
 
 <script>
-import { computed } from '@vue/composition-api'
+import { computed, ref, watch } from '@vue/composition-api'
 
 import { resolveSidebarItems } from '@/theme/utils/sidebar'
 
@@ -97,8 +98,18 @@ export default {
 
   setup (_, { root }) {
     const items = computed(() => resolveSidebarItems(root.$page.regularPath, root.$site, root.$themeLocaleConfig))
+    const sidebarTitleActive = ref(null)
+
+    watch(() => root.$route.path, val => {
+      const item = items.value.find(item => item.children.some(child => child.path === val))
+      if (item) {
+        sidebarTitleActive.value = item.title
+      }
+    }, { immediate: true })
+
     return {
-      items
+      items,
+      sidebarTitleActive
     }
   }
 }