refactor: update links in the sidebar

src/_nav.js

@@ -50,6 +50,16 @@ export default [
         name: 'Cards',
         to: '/base/cards',
       },
+      {
+        component: 'CNavItem',
+        name: 'Calendar',
+        href: 'https://coreui.io/vue/docs/components/calendar.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Carousels',
@@ -90,6 +100,25 @@ export default [
         name: 'Progress',
         to: '/base/progress',
       },
+      {
+        component: 'CNavItem',
+        name: 'Smart Pagination',
+        href: 'https://coreui.io/vue/docs/components/smart-pagination.html',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Smart Table',
+        external: true,
+        href: 'https://coreui.io/vue/docs/components/smart-table.html',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Spinners',
@@ -110,6 +139,16 @@ export default [
         name: 'Tooltips',
         to: '/base/tooltips',
       },
+      {
+        component: 'CNavItem',
+        name: 'Virtual Scroller',
+        href: 'https://coreui.io/vue/docs/components/virtual-scroller.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      }
     ],
   },
   {
@@ -128,6 +167,16 @@ export default [
         name: 'Button Groups',
         to: '/buttons/button-groups',
       },
+      {
+        component: 'CNavItem',
+        name: 'Loading Button',
+        href: 'https://coreui.io/vue/docs/components/loading-button.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Dropdowns',
@@ -161,6 +210,16 @@ export default [
         name: 'Range',
         to: '/forms/range',
       },
+      {
+        component: 'CNavItem',
+        name: 'Range Slider',
+        href: 'https://coreui.io/vue/docs/forms/range-slider.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Input Group',
@@ -171,6 +230,45 @@ export default [
         name: 'Floating Labels',
         to: '/forms/floating-labels',
       },
+      {
+        component: 'CNavItem',
+        name: 'Date Picker',
+        href: 'https://coreui.io/vue/docs/forms/date-picker.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Date Range Picker',
+        href: 'https://coreui.io/vue/docs/forms/date-range-picker.html',
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Rating',
+        href: 'https://coreui.io/vue/docs/forms/rating.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
+      {
+        component: 'CNavItem',
+        name: 'Time Picker',
+        href: 'https://coreui.io/vue/docs/forms/time-picker.html',
+        external: true,
+        badge: {
+          color: 'danger',
+          text: 'PRO',
+        },
+      },
       {
         component: 'CNavItem',
         name: 'Layout',

src/components/AppSidebarNav.js

@@ -1,6 +1,7 @@
 import { defineComponent, h, onMounted, ref, resolveComponent } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
+import { cilExternalLink } from '@coreui/icons'
 import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
 import nav from '@/_nav.js'
 
@@ -78,6 +79,45 @@ const AppSidebarNav = defineComponent({
         )
       }
 
+      if (item.href) {
+        return h(
+          resolveComponent(item.component),
+          {
+            href: item.href,
+            target: '_blank',
+            rel: 'noopener noreferrer',
+          },
+          {
+            default: () => [
+              item.icon
+                ? h(resolveComponent('CIcon'), {
+                    customClassName: 'nav-icon',
+                    name: item.icon,
+                  })
+                : h('span', { class: 'nav-icon' }, h('span', { class: 'nav-icon-bullet' })),
+              item.name,
+              item.external && h(resolveComponent('CIcon'), {
+                class: 'ms-2',
+                name: cilExternalLink,
+                size: 'sm'
+              }),
+              item.badge &&
+                h(
+                  CBadge,
+                  {
+                    class: 'ms-auto',
+                    color: item.badge.color,
+                    size: 'sm',
+                  },
+                  {
+                    default: () => item.badge.text,
+                  },
+                ),
+            ],
+          },
+        )
+      }
+
       return item.to
         ? h(
             RouterLink,
@@ -110,6 +150,7 @@ const AppSidebarNav = defineComponent({
                           {
                             class: 'ms-auto',
                             color: item.badge.color,
+                            size: 'sm',
                           },
                           {
                             default: () => item.badge.text,