From 515ef7a95d6596d081373a5cc388a08923306358 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Wed, 27 Oct 2021 15:03:37 +0200
Subject: [PATCH] refactor: update examples

---
 src/components/AppHeader.vue    |  2 +-
 src/components/AppSidebarNav.js |  8 ++++----
 src/views/theme/Typography.vue  | 12 ++++++------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index ae964f93..f4cfd638 100644
--- a/src/components/AppHeader.vue
+++ b/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" />
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index f7284c49..4fbb19b3 100644
--- a/src/components/AppSidebarNav.js
+++ b/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,
diff --git a/src/views/theme/Typography.vue b/src/views/theme/Typography.vue
index 39d50a73..c4cd5d96 100644
--- a/src/views/theme/Typography.vue
+++ b/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>