docs: update theme

Author: mrholek

packages/docs/.vuepress/config.ts

@@ -21,9 +21,9 @@ export default defineUserConfig({
   bundler: viteBundler(),
   markdown: {
     anchor: {
-      permalink: anchor.permalink.ariaHidden({
+      permalink: anchor.permalink.linkInsideHeader({
         class: 'anchor-link',
-        placement: 'after',
+        placement: 'after'
       }),
     },
   },

packages/docs/.vuepress/src/client/components/Sidebar.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { useSidebarItems } from '../composables'
 import { SidebarNav } from './SidebarNav'
-
-const sidebarItems = useSidebarItems()
 </script>
 
 <template>
@@ -39,6 +36,6 @@ const sidebarItems = useSidebarItems()
         </CDropdownItem>
       </CDropdownMenu>
     </CDropdown>
-    <SidebarNav :items="sidebarItems" />
+    <SidebarNav />
   </CSidebar>
 </template>

packages/docs/.vuepress/src/client/components/SidebarNav.ts

@@ -1,14 +1,15 @@
 import { defineComponent, h, computed, onMounted, ref } from 'vue'
-import type { VNode } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
-import type { RouteLocationNormalizedLoaded } from 'vue-router'
-import type { ResolvedSidebarItem } from '../../shared'
-
+import { useRoute } from 'vuepress/client'
+import { RouterLink} from 'vue-router'
+import { useSidebarItems } from '../composables'
 import { withBase } from '@vuepress/client'
-
 import { CBadge, CNavGroup, CNavItem, CSidebarNav } from '@coreui/vue/src/'
 import { CIcon } from '@coreui/icons-vue'
 
+import type { VNode } from 'vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import type { ResolvedSidebarItem } from '../../shared'
+
 const normalizePath = (path: string): string =>
   decodeURI(path)
     .replace(/#.*$/, '')
@@ -43,21 +44,16 @@ const isActiveItem = (route: RouteLocationNormalizedLoaded, item: ResolvedSideba
 
 const SidebarNav = defineComponent({
   name: 'SidebarNav',
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-  },
-  setup(props) {
+  setup() {
+    const sidebarItems = useSidebarItems()
     const route = useRoute()
     const firstRender = ref(true)
 
     onMounted(() => {
       firstRender.value = false
     })
 
-    const renderItem = (item: ResolvedSidebarItem): VNode => {
+    const renderItem = (item: any): VNode => {
       if (item.children && !item.link.includes('.html')) {
         const visible = computed(() => item.children.some((child) => isActiveItem(route, child)))
 
@@ -122,7 +118,7 @@ const SidebarNav = defineComponent({
       CSidebarNav,
       {},
       {
-        default: () => props.items.map((item: any) => renderItem(item)),
+        default: () => sidebarItems.value.map((item: any) => renderItem(item)),
       }
     )
     },

packages/docs/.vuepress/src/client/composables/useSidebarItems.ts

@@ -143,19 +143,20 @@ export const resolveArraySidebarItems = (
       }
     }
 
+    // TODO: check if we need this
     // if the sidebar item is current page and children is not set
     // use headers of current page as children
-    if (childItem.link === route.path) {
-      // skip h1 header
-      const headers =
-        page.value.headers[0]?.level === 1
-          ? page.value.headers[0].children
-          : page.value.headers
-      return {
-        ...childItem,
-        children: headersToSidebarItemChildren(headers, sidebarDepth),
-      }
-    }
+    // if (childItem.link === route.path) {
+    //   // skip h1 header
+    //   const headers =
+    //     page.value.headers[0]?.level === 1
+    //       ? page.value.headers[0].children
+    //       : page.value.headers
+    //   return {
+    //     ...childItem,
+    //     children: headersToSidebarItemChildren(headers, sidebarDepth),
+    //   }
+    // }
 
     return childItem
   }