Joel Kleppinger
e64c0a034e
When a mobile user clicks a link in the sidebar, it should close that sidebar for mobile users. The reason is that the "default" mobile experience ought to be menu-less or content will flow off the screen.
68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<template>
|
|
<div v-if="linkExternal">
|
|
<a :href="url" :class="classList">
|
|
<i :class="icon"></i> {{name}}
|
|
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
|
</a>
|
|
</div>
|
|
<div v-else>
|
|
<router-link :to="url" :class="classList">
|
|
<span @click="hideMobile">
|
|
<i :class="icon"></i> {{name}}
|
|
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
|
</span>
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import isExternal from 'is-url-external'
|
|
|
|
export default {
|
|
name: 'sidebar-nav-link',
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
url: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
badge: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
classList () {
|
|
return [
|
|
'nav-link',
|
|
this.linkVariant
|
|
]
|
|
},
|
|
linkVariant () {
|
|
return this.variant ? `nav-link-${this.variant}` : ''
|
|
},
|
|
linkExternal () {
|
|
return isExternal(this.url)
|
|
}
|
|
},
|
|
methods: {
|
|
hideMobile () {
|
|
if (document.body.classList.contains('sidebar-mobile-show')) {
|
|
document.body.classList.toggle('sidebar-mobile-show')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|