65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
<template>
|
|
<nav class="book-topics">
|
|
<router-link
|
|
:to="{name: 'topic', params: {topicSlug: topic.slug}}"
|
|
:class="{'book-topics__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
|
|
:key="topic.id"
|
|
tag="div"
|
|
active-class="book-subnavigation__item--active"
|
|
class="book-topics__topic book-subnavigation__item"
|
|
v-for="topic in topics"
|
|
@click.native="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, networkStatus}) {
|
|
if (!loading) {
|
|
this.topics = this.$getRidOfEdges(data).topics;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
.book-topics {
|
|
&__topic {
|
|
}
|
|
}
|
|
</style>
|