gistfile1.vue

<template lang="pug">
.navigation__items
  .navigation__item.navigation__item--submenu(v-for="(unity, index) in unities", :class="{ 'opened' : showSubmenu }")
    .navigation__item-name.link {{ unity.name }}
    .navigation__submenu-toggle(v-on:click="toggleSubmenu")
    .navigation__submenu
      .grid-container
        .grid-row
          .col-xs-12
            .navigation__submenu-inner
              .navigation__submenu-column(v-for="(section, index) in sectionsList(unity.sections)")
                .navigation__submenu-heading
                  a.navigation__submenu-link.link.link--styled(href="#") {{ section.name }}
                .navigation__submenu-sub-toggle
                .navigation__submenu-sub
                  .navigation__submenu-item
                    a.navigation__submenu-link.link.link--gray-styled(href="#")
</template>

<script>
export default {
  name: 'HeaderMenuItem',

  props: {
    unities: {
      type: Array,
      required: true,
    },
  },

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

  methods: {
    sectionsList(sections) {
      return sections.filter(section => section.depth === 0);
    },

    toggleSubmenu() {
      this.showSubmenu = !this.showSubmenu;
    },
  },
};
</script>

<style lang="less" scoped>
.navigation__items {
  display: flex;
}
</style>