<template>
  <ods-main-navigation
    :navigation="navigation"
    ref="navigation">
    <template slot="suites">
      <suites-menu/>
    </template>
  </ods-main-navigation>
</template>

<script>
import navigationConfig from '@/components/nav/config.json';
import SuitesMenu from '@/components/header/SuitesMenu';
import UserMenu from '@/components/header/UserMenu';

export default {
  name: 'NavContent',
  components: {
    SuitesMenu,
    UserMenu,
  },
  data() {
    return {navigation: navigationConfig};
  },
  watch: {
    '$i18n.locale': {
      handler() {
        const assignName = (item) => {
          this.$set(item, 'name', item.langs[this.$i18n.locale]);
          if (item.children) {
            Object.keys(item.children).forEach((key) => {
              assignName(item.children[key]);
            });
          }
        };
        Object.keys(this.navigation).forEach((key) => {
          assignName(this.navigation[key]);
        });
      },
      immediate: true,
    },
  },
};
</script>
