refactor: update examples

src/components/AppHeader.vue

@@ -18,7 +18,7 @@
           <CNavLink href="#">Settings</CNavLink>
         </CNavItem>
       </CHeaderNav>
-      <CHeaderNav class="me-4">
+      <CHeaderNav>
         <CNavItem>
           <CNavLink href="#">
             <CIcon class="mx-2" icon="cil-bell" size="lg" />

src/components/AppSidebarNav.js

@@ -1,7 +1,7 @@
 import { defineComponent, h, resolveComponent } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
-import { CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
+import { CBadge, CSidebarNav, CNavItem, CNavGroup, CNavTitle } from '@coreui/vue'
 import nav from '@/_nav.js'
 
 const AppSidebarNav = defineComponent({
@@ -49,9 +49,9 @@ const AppSidebarNav = defineComponent({
 
       if (item.items) {
         return h(
-          resolveComponent('CNavGroup'),
+          CNavGroup,
           {
-            visible: item.items.some((child) => isActiveItem(route, child)),
+            active: item.items.some((child) => isActiveItem(route, child)),
           },
           {
             togglerContent: () => [
@@ -92,7 +92,7 @@ const AppSidebarNav = defineComponent({
                       item.name,
                       item.badge &&
                         h(
-                          resolveComponent('CBadge'),
+                          CBadge,
                           {
                             class: 'ms-auto',
                             color: item.badge.color,

src/views/theme/Typography.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol>
-      <CCard>
+      <CCard class="mb-4">
         <CCardHeader> Headings </CCardHeader>
         <CCardBody>
           <p>
@@ -92,7 +92,7 @@
           </CTable>
         </CCardBody>
       </CCard>
-      <CCard>
+      <CCard class="mb-4">
         <CCardHeader> Headings </CCardHeader>
         <CCardBody>
           <p>
@@ -111,7 +111,7 @@
           </div>
         </CCardBody>
       </CCard>
-      <CCard>
+      <CCard class="mb-4">
         <CCardHeader> Display headings </CCardHeader>
         <CCardBody>
           <p>
@@ -148,7 +148,7 @@
           </div>
         </CCardBody>
       </CCard>
-      <CCard>
+      <CCard class="mb-4">
         <CCardHeader> Inline text elements </CCardHeader>
         <CCardBody>
           <p>
@@ -182,13 +182,13 @@
               </small>
             </p>
             <p>
-              <sCTableRowong>This line rendered as bold text.</sCTableRowong>
+              <strong>This line rendered as bold text.</strong>
             </p>
             <p><em>This line rendered as italicized text.</em></p>
           </div>
         </CCardBody>
       </CCard>
-      <CCard>
+      <CCard class="mb-4">
         <CCardHeader> Description list alignment </CCardHeader>
         <CCardBody>
           <p>