Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 5dc8b4a

Browse filesBrowse files
committed
feat(SidebarNavLink): attributes
1 parent 86acf11 commit 5dc8b4a
Copy full SHA for 5dc8b4a

File tree

2 files changed

+35
-13
lines changed
Filter options

2 files changed

+35
-13
lines changed

‎src/components/Sidebar/SidebarNav.vue

Copy file name to clipboardExpand all lines: src/components/Sidebar/SidebarNav.vue
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,21 @@
2121
<!-- Second level dropdown -->
2222
<SidebarNavDropdown :key="index1" :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
2323
<li :key="index2" class="nav-item" v-for="(childL2, index2) in childL1.children">
24-
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
24+
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant" :attributes="item.attributes" />
2525
</li>
2626
</SidebarNavDropdown>
2727
</template>
2828
<template v-else>
2929
<SidebarNavItem :key="index1" :classes="item.class">
30-
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
30+
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant" :attributes="item.attributes"/>
3131
</SidebarNavItem>
3232
</template>
3333
</template>
3434
</SidebarNavDropdown>
3535
</template>
3636
<template v-else>
3737
<SidebarNavItem :key="index" :classes="item.class">
38-
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
38+
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant" :attributes="item.attributes"/>
3939
</SidebarNavItem>
4040
</template>
4141
</template>

‎src/components/Sidebar/SidebarNavLink.vue

Copy file name to clipboardExpand all lines: src/components/Sidebar/SidebarNavLink.vue
+32-10Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
<template>
2-
<div v-if="isExternalLink">
3-
<a :href="url" :class="classList">
2+
<div v-if="isDisabled">
3+
<a href :class="classList" v-bind="attributes" tabindex="-1">
4+
<i :class="classIcon"></i> {{name}}
5+
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
6+
</a>
7+
</div>
8+
<div v-else-if="isExternalLink">
9+
<a :href="url" :class="classList" v-bind="attributes">
410
<i :class="classIcon"></i> {{name}}
511
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
612
</a>
713
</div>
814
<div v-else>
9-
<router-link :to="url" :class="classList">
15+
<router-link :to="url" :class="classList" v-bind="attributes">
1016
<i :class="classIcon"></i> {{name}}
1117
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
1218
</router-link>
@@ -38,15 +44,21 @@ export default {
3844
default: ''
3945
},
4046
classes: {
41-
type: String,
47+
type: [String, Array, Object],
4248
default: ''
49+
},
50+
attributes: {
51+
type: Object,
52+
default: () => { return Object.create(null) }
4353
}
4454
},
4555
computed: {
4656
classList () {
4757
return [
4858
'nav-link',
4959
this.linkVariant,
60+
...this.disabledClasses,
61+
...this.attrClasses,
5062
...this.itemClasses
5163
]
5264
},
@@ -60,14 +72,24 @@ export default {
6072
return this.variant ? `nav-link-${this.variant}` : ''
6173
},
6274
itemClasses () {
63-
return this.classes ? this.classes.split(' ') : []
75+
return this.getClassArray(this.classes)
76+
},
77+
attrClasses () {
78+
return this.getClassArray(this.attributes.class)
79+
},
80+
disabledClasses () {
81+
return this.isDisabled ? 'disabled btn-link'.split(' ') : []
82+
},
83+
isDisabled () {
84+
return Boolean(this.attributes.disabled)
6485
},
6586
isExternalLink () {
66-
if (this.url.substring(0, 4) === 'http') {
67-
return true
68-
} else {
69-
return false
70-
}
87+
return Boolean(this.url.substring(0, 4) === 'http')
88+
}
89+
},
90+
methods: {
91+
getClassArray(classes) {
92+
return !classes ? [] : typeof classes === 'string' || classes instanceof String ? classes.split(' ') : Array.isArray(classes) ? classes : Object.keys(classes).filter(i=>classes[i])
7193
}
7294
}
7395
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.