refactor: changes in sidebar components.

- enable passing class to link and dropdown,
- remove label prop and do not show icon by default

Author: woothu

src/components/Sidebar/CSidebarNav.vue

@@ -19,8 +19,7 @@ export default {
   props: {
     navItems: {
       type: Array,
-      required: true,
-      default: () => []
+      required: true
     }
   },
   components: {

src/components/Sidebar/CSidebarNavItem.vue

@@ -1,10 +1,11 @@
 <template>
   <CSidebarNavDropdown
-    v-if="item.children"
+    v-if="item && item.children"
     :name="item.name"
     :url="item.url"
     :icon="item.icon"
     :open="item.open"
+    :class="item.class"
   >
     <CSidebarNavItem
       v-for="(dropdownItem, key) in item.children"
@@ -14,7 +15,7 @@
   </CSidebarNavDropdown>
   <li
     v-else
-    :class="['c-nav-item', item.classes]"
+    :class="['c-nav-item', item ? item.class : null]"
   >
     <slot>
       <CSidebarNavLink v-bind="item"/>

src/components/Sidebar/CSidebarNavItems.vue

@@ -18,7 +18,6 @@
           :name="item.name"
           :url="item.url"
           :icon="item.icon"
-          :label="item.label"
           :classes="item.class"
         />
       </template>

src/components/Sidebar/CSidebarNavLabel.vue

@@ -1,7 +1,7 @@
 <template>
-  <CSidebarNavItem :classes="navItemClasses">
-    <a class="nav-label" :href="url">
-      <i :class="iconClasses"></i>
+  <CSidebarNavItem :classes="['c-hidden-cn', this.classes]">
+    <a class="c-nav-label" :href="url">
+      <i v-if="icon" :class="icon"></i>
       {{name}}
     </a>
   </CSidebarNavItem>
@@ -20,28 +20,8 @@ export default {
       type: String,
       default: '#'
     },
-    icon: {
-      type: String,
-      default: 'fa fa-circle'
-    },
-    classes: String,
-    label: {
-      type: Object,
-      required: true,
-      default: () => {}
-    }
-  },
-  computed: {
-    navItemClasses () {
-      return ['c-hidden-cn', this.classes]
-    },
-    iconClasses () {
-      return [
-        this.icon || 'fa fa-circle',
-        this.label.class,
-        { [`c-text-${this.label.variant}`] : this.label.variant }
-      ]
-    }
+    icon: String,
+    classes: String
   }
 }
 </script>