v1.0.9 with Bootstrap 4.0.0

Vue_Starter/src/components/Sidebar/Sidebar.vue

@@ -12,6 +12,9 @@
           <template v-else-if="item.divider">
             <SidebarNavDivider :classes="item.class"/>
           </template>
+          <template v-else-if="item.label">
+            <SidebarNavLabel :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
+          </template>
           <template v-else>
             <template v-if="item.children">
               <!-- First level dropdown -->
@@ -57,6 +60,7 @@ import SidebarNavDropdown from './SidebarNavDropdown'
 import SidebarNavLink from './SidebarNavLink'
 import SidebarNavTitle from './SidebarNavTitle'
 import SidebarNavItem from './SidebarNavItem'
+import SidebarNavLabel from './SidebarNavLabel'
 export default {
   name: 'sidebar',
   props: {
@@ -75,7 +79,8 @@ export default {
     SidebarNavDropdown,
     SidebarNavLink,
     SidebarNavTitle,
-    SidebarNavItem
+    SidebarNavItem,
+    SidebarNavLabel
   },
   methods: {
     handleClick (e) {

Vue_Starter/src/components/Sidebar/SidebarNavLabel.vue

@@ -0,0 +1,59 @@
+<template>
+  <SidebarNavItem :classes="classList.navItem">
+    <a :class="classList.navLink" :href="url"><i :class="classList.icon"></i> {{name}}</a>
+  </SidebarNavItem>
+</template>
+
+<script>
+  import SidebarNavItem from './SidebarNavItem'
+  import SidebarNavLink from './SidebarNavLink'
+  export default {
+    name: 'sidebar-nav-label',
+    components: {
+      SidebarNavItem,
+      SidebarNavLink
+    },
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      url: {
+        type: String,
+        default: '#'
+      },
+      icon: {
+        type: String,
+        default: 'fa fa-circle'
+      },
+      classes: {
+        type: String,
+        default: ''
+      },
+      label: {
+        type: Object,
+        required: true,
+        default: () => {}
+      }
+    },
+    computed: {
+      classList () {
+        const classes = {
+          navItem: ['hidden-cn', ...this.getClasses(this.classes)].join(' '),
+          navLink: 'nav-label',
+          icon: [
+            this.icon ? this.icon : 'fa fa-circle',
+            this.label.variant ? `text-${this.label.variant}` : '',
+            this.label.class ? this.label.class : ''
+          ].join(' ')
+        }
+        return classes
+      }
+    },
+    methods: {
+      getClasses (classes) {
+        return classes ? classes.split(' ') : []
+      }
+    }
+  }
+</script>

Vue_Starter/src/components/index.js

@@ -3,7 +3,7 @@ import Breadcrumb from './Breadcrumb.vue'
 import Callout from './Callout.vue'
 import Footer from './Footer.vue'
 import Header from './Header.vue'
-import Sidebar from './Sidebar.vue'
+import Sidebar from './Sidebar/Sidebar.vue'
 import Switch from './Switch.vue'
 
 export {