refactor: update examples

src/components/AppFooter.vue

@@ -5,7 +5,7 @@
       <span class="ml-1">&copy; {{new Date().getFullYear()}} creativeLabs.</span>
     </div>
     <div class="mfs-auto">
-      <span class="mr-1" target="_blank">Powered by</span>
+      <span class="me-1" target="_blank">Powered by</span>
       <a href="https://coreui.io/vue">CoreUI for Vue</a>
     </div>
   </CFooter>

src/components/AppHeader.vue

@@ -1,52 +1,101 @@
 <template>
   <CHeader position="sticky" class="mb-4">
-    <CHeaderToggler class="ms-md-3" @click="$store.commit('toggleSidebar')">
-      <CIcon name="cil-menu" size="lg" />
-    </CHeaderToggler>
-    <CHeaderBrand class="mx-auto d-lg-none" to="/">
-      <CIcon name="logo" height="48" alt="Logo" />
-    </CHeaderBrand>
-    <CHeaderNav class="d-md-down-none me-auto">
-      <CNavItem>
-        <CNavLink
-          href="/dashboard"
+    <CContainer fluid>
+      <CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
+        <CIcon icon="cil-menu" size="lg" />
+      </CHeaderToggler>
+      <CHeaderBrand class="mx-auto d-lg-none" to="/">
+        <CIcon name="logo" height="48" alt="Logo" />
+      </CHeaderBrand>
+      <CHeaderNav class="d-md-down-none me-auto">
+        <CNavItem>
+          <CNavLink href="/dashboard"> Dashboard </CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href="#">Users</CNavLink>
+        </CNavItem>
+        <CNavItem>
+          <CNavLink href="#">Settings</CNavLink>
+        </CNavItem>
+      </CHeaderNav>
+      <CHeaderNav class="me-4">
+        <CNavItem class="d-md-down-none mx-2">
+          <CNavLink>
+            <CIcon icon="cil-bell" size="lg" />
+          </CNavLink>
+        </CNavItem>
+        <CNavItem class="d-md-down-none mx-2">
+          <CNavLink>
+            <CIcon icon="cil-list" size="lg" />
+          </CNavLink>
+        </CNavItem>
+        <CNavItem class="d-md-down-none mx-2">
+          <CNavLink>
+            <CIcon icon="cil-envelope-open" size="lg" />
+          </CNavLink>
+        </CNavItem>
+        <AppHeaderDropdownAccnt />
+      </CHeaderNav>
+    </CContainer>
+    <CHeaderDivider />
+    <CContainer fluid>
+      <CBreadcrumb class="d-md-down-none me-auto mb-0">
+        <CBreadcrumbItem
+          v-for="item in currentRoute"
+          :href="item.to"
+          :active="item.to === '' ? true : false"
         >
-          Dashboard
-        </CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Users</CNavLink>
-      </CNavItem>
-      <CNavItem>
-        <CNavLink href="#">Settings</CNavLink>
-      </CNavItem>
-    </CHeaderNav>
-    <CHeaderNav class="me-4">
-      <CNavItem class="d-md-down-none mx-2">
-        <CNavLink>
-          <CIcon name="cil-bell" size="lg" />
-        </CNavLink>
-      </CNavItem>
-      <CNavItem class="d-md-down-none mx-2">
-        <CNavLink>
-          <CIcon name="cil-list" />
-        </CNavLink>
-      </CNavItem>
-      <CNavItem class="d-md-down-none mx-2">
-        <CNavLink>
-          <CIcon name="cil-envelope-open" />
-        </CNavLink>
-      </CNavItem>
-      <!-- <TheHeaderDropdownAccnt/> -->
-    </CHeaderNav>
+          {{ item.name }}
+        </CBreadcrumbItem>
+      </CBreadcrumb>
+    </CContainer>
   </CHeader>
 </template>
 
 <script>
-// import TheHeaderDropdownAccnt from './TheHeaderDropdownAccnt'
+import AppHeaderDropdownAccnt from "./AppHeaderDropdownAccnt";
 
+import router from "../router";
 export default {
   name: "AppHeader",
-  components: {},
+  components: {
+    AppHeaderDropdownAccnt,
+  },
+  data: function () {
+    return {
+      currentRoute: [],
+    };
+  },
+  methods: {
+    upperCaseFirstChar: function (string) {
+      return string.substr(0, 1).toUpperCase() + string.substr(1);
+    },
+    makeCurrentRoute: function () {
+      let result = [];
+      let path = router.currentRoute._value.path;
+      let temp = path.split("/");
+      let to = "";
+      if (temp.length <= 2) {
+        result.push({ to: "", name: router.currentRoute._value.name });
+      } else {
+        for (let i = 1; i < temp.length - 1; i++) {
+          for (let j = 1; j <= i; j++) {
+            to += `/${temp[j]}`;
+          }
+          result.push({ to: to, name: this.upperCaseFirstChar(temp[i]) });
+        }
+        result.push({ to: "", name: router.currentRoute._value.name });
+      }
+      return result;
+    },
+  },
+  watch: {
+    $route(to, from) {
+      this.currentRoute = this.makeCurrentRoute();
+    },
+  },
+  mounted: function () {
+    this.currentRoute = this.makeCurrentRoute();
+  },
 };
 </script>

src/components/AppHeaderDropdownAccnt.vue

@@ -0,0 +1,59 @@
+<template>
+  <CDropdown variant="nav-item">
+    <CDropdownToggle placement="bottom-end" class="py-0" :caret="false">
+      <CAvatar :src="avatar" size="md"/>
+    </CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownHeader tag="div" class="text-center" color="light">
+        <strong>Account</strong>
+      </CDropdownHeader>
+      <CDropdownItem>
+        <CIcon icon="cil-bell" /> Updates
+        <CBadge color="info" class="ms-auto">{{ itemsCount }}</CBadge>
+      </CDropdownItem>
+      <CDropdownItem>
+        <CIcon icon="cil-envelope-open" /> Messages
+        <CBadge color="success" class="ms-auto">{{ itemsCount }}</CBadge>
+      </CDropdownItem>
+      <CDropdownItem>
+        <CIcon icon="cil-task" /> Tasks
+        <CBadge color="danger" class="ms-auto">{{ itemsCount }}</CBadge>
+      </CDropdownItem>
+      <CDropdownItem>
+        <CIcon icon="cil-comment-square" /> Comments
+        <CBadge color="warning" class="ms-auto">{{ itemsCount }}</CBadge>
+      </CDropdownItem>
+      <CDropdownHeader tag="div" class="text-center" color="light">
+        <strong>Settings</strong>
+      </CDropdownHeader>
+      <CDropdownItem> <CIcon icon="cil-user" /> Profile </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-settings" /> Settings </CDropdownItem>
+      <CDropdownItem>
+        <CIcon icon="cil-dollar" /> Payments
+        <CBadge color="secondary" class="ms-auto">{{ itemsCount }}</CBadge>
+      </CDropdownItem>
+      <CDropdownItem>
+        <CIcon icon="cil-file" /> Projects
+        <CBadge color="primary" class="ms-auto">{{ itemsCount }}</CBadge>
+      </CDropdownItem>
+      <CDropdownDivider />
+      <CDropdownItem>
+        <CIcon icon="cil-shield-alt" /> Lock Account
+      </CDropdownItem>
+      <CDropdownItem> <CIcon icon="cil-lock-locked" /> Logout </CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</template>
+
+<script>
+import avatar from './../assets/images/avatars/8.jpg'
+export default {
+  name: "AppHeaderDropdownAccnt",
+  data() {
+    return {
+      avatar: avatar,
+      itemsCount: 42,
+    };
+  },
+};
+</script>

src/components/AppSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-  <CSidebar position="fixed" selfHiding="md">
+  <CSidebar position="fixed" selfHiding="md" :class="sidebarClass">
     <CSidebarBrand>
       <CIcon
         customClasses="sidebar-brand-full"
@@ -26,5 +26,10 @@ export default {
   components: {
     AppSidebarNav,
   },
+  computed: {
+    sidebarClass () {
+      return this.$store.state.sidebarClass
+    }
+  }
 };
 </script>

src/components/AppSidebarNav.js

@@ -33,7 +33,7 @@ const AppSidebarNav = defineComponent({
                   [
                     item.icon &&
                       h(resolveComponent("CIcon"), {
-                        customClasses: "nav-icon",
+                        customClassName: "nav-icon",
                         name: item.icon,
                       }),
                     item.name,
@@ -65,7 +65,7 @@ const AppSidebarNav = defineComponent({
               {
                 togglerContent: () => [
                   h(resolveComponent("CIcon"), {
-                    customClasses: "nav-icon",
+                    customClassName: "nav-icon",
                     name: item.icon,
                   }),
                   item.name,

src/components/Example.vue

@@ -3,12 +3,12 @@
     <CNav variant="tabs">
       <CNavItem>
         <CNavLink href="#" active>
-          <CIcon name="cil-media-play" class="me-2" />
+          <CIcon icon="cil-media-play" class="me-2" />
         </CNavLink>
       </CNavItem>
       <CNavItem>
         <CNavLink :href="href" target="_blank">
-          <CIcon name="cil-code" class="me-2" />
+          <CIcon icon="cil-code" class="me-2" />
           Code
         </CNavLink>
       </CNavItem>