// js/header_component.js
const navItems = [
  { class: 'top disp_sp_only', href: 'index.html#top', label: 'ページトップ' },
  { class: 'news disp_sp_only', href: 'index.html#news', label: 'お知らせ' },
  { class: 'about', href: 'index.html#Category', label: 'ブース一覧・開催概要' },
  { 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: 'ステージ' },
  { class: 'rally', href: 'rally.html', label: 'デジタル<br>スタンプラリー' }
];

const HeaderComponent = {
  template: `
    <header>
      <h1 class="site-logo">
        <a href="index.html">
          <img src="images/logo_guriripark.svg" alt="あすとつながるぐりりパーク【khb開局記念イベント2025】">
        </a>
      </h1>
      <button class="toggle"></button>
      <nav>
        <ul class="nav">
          <li v-for="item in navItems" :class="item.class">
            <a :href="item.href"></a>
            <span v-html="item.label"></span>
          </li>
        </ul>
      </nav>
    </header>
  `,
  data() {
    return {
      navItems
    };
  }
};