66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<template>
|
|
<nav class="topic-navigation">
|
|
<router-link
|
|
:to="{name: 'topic', params: {topicSlug: topic.slug}}"
|
|
:class="{'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
|
|
tag="div"
|
|
active-class="book-subnavigation__item--active"
|
|
class="topic-navigation__topic book-subnavigation__item"
|
|
v-for="topic in topics"
|
|
:key="topic.id"
|
|
@click="closeSidebar('navigation')"
|
|
>
|
|
{{ topic.order }}.
|
|
{{ topic.title }}
|
|
</router-link>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql';
|
|
import sidebarMixin from '@/mixins/sidebar';
|
|
|
|
export default {
|
|
props: {
|
|
mobile: {
|
|
default: false,
|
|
},
|
|
},
|
|
|
|
mixins: [sidebarMixin],
|
|
|
|
data() {
|
|
return {
|
|
topics: [],
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
topicId(id) {
|
|
return atob(id);
|
|
},
|
|
},
|
|
|
|
apollo: {
|
|
topics: {
|
|
query: ALL_TOPICS_QUERY,
|
|
manual: true,
|
|
result({data, loading}) {
|
|
if (!loading) {
|
|
this.topics = this.$getRidOfEdges(data).topics;
|
|
}
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "~styles/helpers";
|
|
|
|
.topic-navigation {
|
|
&__topic {
|
|
}
|
|
}
|
|
</style>
|