|
<!-- |
|
How to use: |
|
|
|
<navigator :data="[ |
|
{ |
|
type: 'link', |
|
link: URL, // required |
|
label: String, // required |
|
icon: BootstrapIcon, // optional, https://bootstrap-vue.org/docs/icons |
|
external: Boolean, // optional, <a> if external, else <nuxt-link> |
|
exact: Boolean, // optional, <nuxt-link exact> |
|
}, |
|
{ |
|
type: 'heading', |
|
label: String, // required |
|
button: { // optional |
|
icon: BootstrapIcon, // required, https://bootstrap-vue.org/docs/icons |
|
link: URL, // required |
|
}, |
|
}, |
|
]"> |
|
--> |
|
|
|
<template> |
|
<ul class="nav flex-column"> |
|
<template v-for="(item, index) in data"> |
|
<li v-if="item.type === 'link'" :key="index" class="nav-item"> |
|
<component |
|
:is="!item.external ? 'nuxt-link' : 'a'" |
|
v-if="item.link" |
|
class="nav-link" |
|
active-class="active" |
|
exact-active-class="active" |
|
:exact="item.exact" |
|
:target="item.target" |
|
v-bind="{ |
|
to: !item.external ? item.link : undefined, |
|
href: item.link, |
|
}" |
|
> |
|
<component :is="item.icon" v-if="item.icon" class="mr-1" /> |
|
{{ item.label }} |
|
</component> |
|
</li> |
|
<h6 |
|
v-else-if="item.type === 'heading'" |
|
:key="index" |
|
class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted" |
|
> |
|
<span>{{ item.label }}</span> |
|
<template v-if="item.button && item.button.link"> |
|
<component |
|
:is="!item.button.external ? 'nuxt-link' : 'a'" |
|
v-if="item.button" |
|
class="d-flex align-items-center text-muted" |
|
active-class="active" |
|
exact-active-class="active" |
|
:exact="item.button.exact" |
|
:target="item.button.target" |
|
v-bind="{ |
|
to: !item.button.external ? item.button.link : undefined, |
|
href: item.button.link, |
|
}" |
|
> |
|
<component |
|
:is="item.button.icon" |
|
v-if="item.button.icon" |
|
font-scale="1.3" |
|
></component> |
|
</component> |
|
</template> |
|
</h6> |
|
</template> |
|
</ul> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: 'Navigator', |
|
props: { |
|
data: { |
|
type: Array, |
|
default() { |
|
return [] |
|
}, |
|
}, |
|
}, |
|
} |
|
</script> |
