<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>
