refactor: change implementation of sidebar menu (CSidebarNavLink)

Author: woothu

src/components/Sidebar/CSidebarNavItems.vue

@@ -44,10 +44,7 @@
                     v-for="(childL2, index2) in childL1.children"
                   >
                     <CSidebarNavLink
-                      :name="childL2.name"
-                      :url="childL2.url"
-                      :icon="childL2.icon"
-                      :badge="childL2.badge"
+                      v-bind="childL2"
                       :variant="item.variant"
                     />
                   </li>
@@ -56,10 +53,7 @@
               <template v-else>
                 <CSidebarNavItem :key="index1" :classes="item.class">
                   <CSidebarNavLink
-                    :name="childL1.name"
-                    :url="childL1.url"
-                    :icon="childL1.icon"
-                    :badge="childL1.badge"
+                    v-bind="childL1"
                     :variant="item.variant"
                   />
                 </CSidebarNavItem>
@@ -69,13 +63,7 @@
         </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"
-            />
+            <CSidebarNavLink v-bind="item"/>
           </CSidebarNavItem>
         </template>
       </template>

src/components/Sidebar/CSidebarNavLink.vue

@@ -1,74 +1,44 @@
 <template>
-  <div v-if="isExternalLink">
-    <a :href="url" :class="classList">
-      <i :class="classIcon"></i> {{name}}
-      <c-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</c-badge>
-    </a>
-  </div>
-  <div v-else>
-    <router-link :to="url" :class="classList">
-      <i :class="classIcon"></i> {{name}}
-      <c-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</c-badge>
-    </router-link>
-  </div>
+  <CLink
+    v-bind="computedProps"
+    :exact="true"
+    class="nav-link"
+  >
+    <i :class="['nav-icon', icon]"></i> {{name}}
+    <CBadge
+      v-if="badge && badge.text"
+      :variant="badge.variant"
+    >
+      {{badge.text}}
+    </CBadge>
+  </CLink>
 </template>
 
-
 <script>
-export default {
-  name: 'CSidebarNavLink',
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    url: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
+import CLink, { propsFactory as linkPropsFactory} from '../Link/CLink'
+
+const props = Object.assign(linkPropsFactory(), {
+    name: String,
+    icon: [String, Array, Object],
     badge: {
       type: Object,
       default: () => {}
     },
-    variant: {
-      type: String,
-      default: ''
-    },
-    classes: {
-      type: String,
-      default: ''
-    }
-  },
+    variant: String,
+    url: String
+  }
+)
+export default {
+  name: 'CSidebarNavLink',
+  props,
   computed: {
-    classList () {
-      return [
-        'nav-link',
-        this.linkVariant,
-        ...this.itemClasses
-      ]
-    },
-    classIcon () {
-      return [
-        'nav-icon',
-        this.icon
-      ]
-    },
-    linkVariant () {
-      return this.variant ? `nav-link-${this.variant}` : ''
-    },
-    itemClasses () {
-      return this.classes ? this.classes.split(' ') : []
+    linkGeneratedFromUrlProp () {
+      if (!this.url) return {}
+      return this.url && this.url.substring(0,4) === 'http' ?
+             { href: this.url } : { to: this.url }
     },
-    isExternalLink () {
-      if (this.url.substring(0, 4) === 'http') {
-        return true
-      } else {
-        return false
-      }
+    computedProps () {
+      return Object.assign({}, this.$props, this.linkGeneratedFromUrlProp)
     }
   }
 }