<template>
  <div
    :class="{ 'sub-navigation-item--active': show}"
    v-click-outside="close"
    class="sub-navigation-item">
    <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>
  import ChevronDown from '@/components/icons/ChevronDown';
  import ChevronUp from '@/components/icons/ChevronUp';

  export default {
    props: ['title'],

    components: {
      ChevronDown,
      ChevronUp
    },

    data() {
      return {
        show: false
      };
    },

    watch: {
      $route(to, from) {
        this.show = false;
      }
    },

    methods: {
      close() {
        this.show = false;
      }
    }
  };
</script>
