<template>
  <div class="flex">
    <template v-for="(item, index) of menu">
      <nuxt-link v-if="item.url" :key="index" class="menu-item" :to="item.url">
        {{ item.title }}
      </nuxt-link>
      <t-dropdown
        v-else-if="item.title.toLowerCase() === 'forum'"
        :key="index"
        toggle-on-hover
        :hide-on-leave-timeout="0"
        :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="menu-item"
          :href="$config.forum_url"
          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>
    </template>
  </div>
</template>

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

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

<style lang="postcss" scoped>
.menu-item {
  @apply 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;
}
</style>