// js/top_nav_component.js

const TopNavComponent = {
  data() {
    return {
      navItems: [
        { class: 'food', href: 'food.html', label: 'グルメ' },
        { class: 'taiken', href: 'taiken.html', label: '体験・学び・SDGs' },
        { class: 'khb_booth', href: 'khb_booth.html', label: 'khbコンテンツ' },
        { class: 'entame', href: 'entame.html', label: 'ステージ' }
      ]
    };
  },
  template: `
<ul class="top-nav__grid">
  <li
    v-for="item in navItems"
    :class="['top-nav__item', item.class]"
  >
    <a :href="item.href">
      <img :src="'images/nav/nav_' + item.class + '.svg'" :alt="item.label.replace(/<br>/g, ' ')" />
      <!--<span v-html="item.label"></span>-->
    </a>
  </li>
</ul>
  `
};