55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
|
<div
|
|
:class="{ 'sub-navigation-item--active': show}"
|
|
class="sub-navigation-item"
|
|
v-click-outside="close"
|
|
>
|
|
<div
|
|
class="sub-navigation-item__title"
|
|
@click="show = !show"
|
|
>
|
|
{{ title }}
|
|
<chevron-down class="sub-navigation-item__icon sub-navigation-item__chevron-down" />
|
|
<chevron-up class="sub-navigation-item__icon sub-navigation-item__chevron-up" />
|
|
</div>
|
|
<div
|
|
class="sub-navigation-item__nav-items book-subnavigation"
|
|
v-if="show"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
const ChevronDown = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown');
|
|
const ChevronUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronUp');
|
|
|
|
export default {
|
|
props: ['title'],
|
|
|
|
components: {
|
|
ChevronDown,
|
|
ChevronUp
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
show: false
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
$route() {
|
|
this.show = false;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
close() {
|
|
this.show = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|