docs: update navigation

Author: mrholek

packages/docs/.vuepress/config.ts

@@ -287,6 +287,17 @@ export default defineUserConfig<DefaultThemeOptions>({
           },
         ],
       },
+      {
+        text: 'Migration',
+        link: '/migration/',
+        icon: '<path fill="var(--ci-primary-color, currentColor)" d="M464,256.25C464,370.8,370.8,464,256.25,464S48.5,370.8,48.5,256.25,141.7,48.5,256.25,48.5a208,208,0,0,1,149.963,64H328.5v32h128V16.5h-32V85.478A239.717,239.717,0,1,0,496,256.25Z" class="ci-primary"></path><polygon fill="var(--ci-primary-color, currentColor)" points="272.5 112.451 240.5 112.549 241.017 282.756 353.301 334.53 366.699 305.47 272.954 262.244 272.5 112.451" class="ci-primary"></polygon>',
+        children: [
+          {
+            text: 'v4',
+            link: '/migration/v4.html',
+          },
+        ],
+      },
     ],
   },
 })

packages/docs/.vuepress/theme-coreui/src/client/components/SidebarNav.ts

@@ -1,4 +1,4 @@
-import { h } from 'vue'
+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'
@@ -41,81 +41,91 @@ const isActiveItem = (route: RouteLocationNormalizedLoaded, item: ResolvedSideba
   return false
 }
 
-const renderItem = (item: ResolvedSidebarItem): VNode => {
-  const route = useRoute()
-  if (item.children && !item.link.includes('.html')) {
-    return h(
-      CNavGroup,
-      {
-        active: item.children.some((child) => isActiveItem(route, child)),
-        compact: true,
-      },
-      {
-        togglerContent: () => [
-          h(CIcon, {
-            customClassName: 'nav-icon text-primary',
-            icon: ['512 512', item.icon],
-            height: 64,
-            width: 64,
-          }),
-          item.text,
-        ],
-        default: () => item.children.map((child) => renderItem(child)),
-      },
-    )
-  }
-
-  return h(
-    RouterLink,
-    {
-      to: item.link,
-      custom: true,
+const SidebarNav = defineComponent({
+  name: 'SidebarNav',
+  props: {
+    items: {
+      type: Array,
+      required: true,
     },
-    {
-      default: (props) =>
-        h(
-          CNavItem,
+  },
+  setup(props) {
+    const route = useRoute()
+    const firstRender = ref(true)
+
+    onMounted(() => {
+      firstRender.value = false
+    })
+
+    const renderItem = (item: ResolvedSidebarItem): VNode => {
+      if (item.children && !item.link.includes('.html')) {
+        const visible = computed(() => item.children.some((child) => isActiveItem(route, child)))
+
+        return h(
+          CNavGroup,
           {
-            active: props.isActive,
-            disabled: item.disabled,
-            href: withBase(item.link),
+            ...(firstRender.value && { visible: visible.value }),
+            compact: true,
           },
           {
-            default: () => [
+            togglerContent: () => [
+              h(CIcon, {
+                customClassName: 'nav-icon text-primary',
+                icon: ['512 512', item.icon],
+                height: 64,
+                width: 64,
+              }),
               item.text,
-              item.badge &&
-                h(
-                  CBadge,
-                  {
-                    class: 'ms-auto',
-                    color: item.badge.color,
-                  },
-                  {
-                    default: () => item.badge.text,
-                  },
-                ),
             ],
+            default: () => item.children.map((child) => renderItem(child)),
           },
-        ),
-    },
-  )
-}
+        )
+      }
 
-export const SidebarNav = ({ items }) => {
-  return h(
-    CSidebarNav,
-    {},
-    {
-      default: () => items.map((item) => renderItem(item)),
-    },
-  )
-}
+      return h(
+        RouterLink,
+        {
+          to: item.link,
+          custom: true,
+        },
+        {
+          default: (props) =>
+            h(
+              CNavItem,
+              {
+                active: props.isActive,
+                disabled: item.disabled,
+                href: withBase(item.link),
+              },
+              {
+                default: () => [
+                  item.text,
+                  item.badge &&
+                    h(
+                      CBadge,
+                      {
+                        class: 'ms-auto',
+                        color: item.badge.color,
+                      },
+                      {
+                        default: () => item.badge.text,
+                      },
+                    ),
+                ],
+              },
+            ),
+        },
+      )
+    }
 
-SidebarNav.displayName = 'SidebarNav'
+    return () => h(
+      CSidebarNav,
+      {},
+      {
+        default: () => props.items.map((item: any) => renderItem(item)),
+      }
+    )
+    },
+})
 
-SidebarNav.props = {
-  items: {
-    type: Array,
-    required: true,
-  },
-}
+export { SidebarNav }