feat: vue-perfect-scrollbar moved to template

VuePerfectScrollbar removed from library because when used in
CNavbarNav component wasn't working after transpilation. CNavbarNav
component replaced with CNavbarNavItems component, which doesn't
have nav and VuePerfectScrollbar wrappers.

Author: woothu

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/vue",
   "description": "CoreUI Vue Bootstrap 4 layout components",
-  "version": "3.0.0-alpha-bridge",
+  "version": "3.0.0-bridge-alpha",
   "license": "MIT",
   "main": "dist/coreui-vue.common.js",
   "module": "dist/coreui-vue.esm.js",
@@ -65,7 +65,6 @@
     "vue": "^2.6.6",
     "vue-clickaway": "^2.2.2",
     "vue-functional-data-merge": "^2.0.7",
-    "vue-perfect-scrollbar": "^0.1.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.1.0",

src/components/Sidebar/CSidebarNav.vue

@@ -0,0 +1,112 @@
+<template>
+  <ul class="nav">
+    <template v-for="(item, index) in items">
+      <template v-if="item.title">
+        <CSidebarNavTitle
+          :key="index"
+          :name="item.name"
+          :classes="item.class"
+          :wrapper="item.wrapper"
+        />
+      </template>
+      <template v-else-if="item.divider">
+        <CSidebarNavDivider :key="index" :classes="item.class"/>
+      </template>
+      <template v-else-if="item.label">
+        <CSidebarNavLabel
+          :key="index"
+          :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 -->
+          <CSidebarNavDropdown
+            :key="index"
+            :name="item.name"
+            :url="item.url"
+            :icon="item.icon"
+          >
+            <template v-for="(childL1, index1) in item.children">
+              <template v-if="childL1.children">
+                <!-- Second level dropdown -->
+                <CSidebarNavDropdown :key="index1"
+                                     :name="childL1.name"
+                                     :url="childL1.url"
+                                     :icon="childL1.icon">
+                  <li
+                    :key="index2"
+                    class="nav-item"
+                    v-for="(childL2, index2) in childL1.children"
+                  >
+                    <CSidebarNavLink
+                      :name="childL2.name"
+                      :url="childL2.url"
+                      :icon="childL2.icon"
+                      :badge="childL2.badge"
+                      :variant="item.variant"
+                    />
+                  </li>
+                </CSidebarNavDropdown>
+              </template>
+              <template v-else>
+                <CSidebarNavItem :key="index1" :classes="item.class">
+                  <CSidebarNavLink
+                    :name="childL1.name"
+                    :url="childL1.url"
+                    :icon="childL1.icon"
+                    :badge="childL1.badge"
+                    :variant="item.variant"
+                  />
+                </CSidebarNavItem>
+              </template>
+            </template>
+          </CSidebarNavDropdown>
+        </template>
+        <template v-else>
+          <CSidebarNavItem :key="index" :classes="item.class">
+            <CSidebarNavLink
+              :name="item.name"
+              :url="item.url"
+              :icon="item.icon"
+              :badge="item.badge"
+              :variant="item.variant"
+            />
+          </CSidebarNavItem>
+        </template>
+      </template>
+    </template>
+  </ul>
+</template>
+
+<script>
+import CSidebarNavDivider from './CSidebarNavDivider'
+import CSidebarNavDropdown from './CSidebarNavDropdown'
+import CSidebarNavLink from './CSidebarNavLink'
+import CSidebarNavTitle from './CSidebarNavTitle'
+import CSidebarNavItem from './CSidebarNavItem'
+import CSidebarNavLabel from './CSidebarNavLabel'
+
+export default {
+  name: 'CSidebarNavItems',
+  props: {
+    items: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
+  components: {
+    CSidebarNavDivider,
+    CSidebarNavDropdown,
+    CSidebarNavLink,
+    CSidebarNavTitle,
+    CSidebarNavItem,
+    CSidebarNavLabel
+  }
+}
+</script>

src/components/Sidebar/CSidebarNavItems.vue

@@ -16,7 +16,7 @@ import CSidebarFooter from './CSidebarFooter'
 import CSidebarForm from './CSidebarForm'
 import CSidebarHeader from './CSidebarHeader'
 import CSidebarMinimizer from './CSidebarMinimizer'
-import CSidebarNav from './CSidebarNav'
+import CSidebarNavItems from './CSidebarNavItems'
 import CSidebarNavDivider from './CSidebarNavDivider'
 import CSidebarNavDropdown from './CSidebarNavDropdown'
 import CSidebarNavItem from './CSidebarNavItem'
@@ -26,7 +26,12 @@ import CSidebarNavTitle from './CSidebarNavTitle'
 import CSidebarToggler from './CSidebarToggler'
 
 export {
-  Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler,
-  CSidebar, CSidebarFooter, CSidebarForm, CSidebarHeader, CSidebarMinimizer, CSidebarNav, CSidebarNavDivider, CSidebarNavItem,
-  CSidebarNavDropdown, CSidebarNavLabel, CSidebarNavLink, CSidebarNavTitle, CSidebarToggler
+  Sidebar, SidebarFooter, SidebarForm,
+  SidebarHeader, SidebarMinimizer, SidebarNav,
+  SidebarNavDivider, SidebarNavItem, SidebarNavDropdown,
+  SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler,
+  CSidebar, CSidebarFooter, CSidebarForm, CSidebarHeader,
+  CSidebarMinimizer, CSidebarNavItems, CSidebarNavDivider,
+  CSidebarNavItem, CSidebarNavDropdown, CSidebarNavLabel,
+  CSidebarNavLink, CSidebarNavTitle, CSidebarToggler
 }