<template>
  <div class="flex mr-3">
    <template v-for="(item, index) of menu">
      <nuxt-link
        v-if="item.url.startsWith('/')"
        :key="index"
        class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2"
        :to="item.url"
      >
        {{ item.title }}
      </nuxt-link>
    </template>

    <t-dropdown
      toggle-on-hover
      :classes="{
        dropdown:
          'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 dark:border-gray-500 border transform translate-y-1',
      }"
    >
      <a
        slot="trigger"
        class="inline-flex items-center relative cursor-pointer whitespace-nowrap py-2 px-3 text-gray-600 hover:text-gray-700 hover:bg-hover-light dark:text-gray-200 rounded-full focus:outline-none focus:ring-2"
        href="https://forum.monnaie-libre.fr/"
        target="_blank"
        rel="noopener noreferrer"
      >
        Forum
        <fa
          icon="external-link-alt"
          class="w-3 ml-1.5 text-gray-500 opacity-75"
        />
      </a>
      <LayoutHeaderMenuForum />
    </t-dropdown>
  </div>
</template>

<script>
import menus from '~/static/settings/menus.json'

export default {
  name: 'LayoutHeaderMenu',
  data() {
    return {
      menu: menus.menu_header,
    }
  },
}
</script>

<style lang="scss" scoped></style>