<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.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 }) {
        if (!loading) {
          this.topics = this.$getRidOfEdges(data).topics;
        }
      },
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/styles/_variables.scss';

.topic-navigation {
  &__topic {
  }
}
</style>
