<script setup>
  const route = useRoute()

  const { isMobile, isDesktopOrTablet } = useDevice();

  const menu = ref(false)

  function openMenu() { menu.value = true }
  function closeMenu() { menu.value = false }
</script>

<template>
  <header>
    <div class="nav">
      <NuxtLink to="/" class="logo" @click="closeMenu()">HNS↗WS</NuxtLink>
      <ul class="links" v-if="isDesktopOrTablet" >
        <li><NuxtLink to="https://decentralizers.com/" target="_Blank">News</NuxtLink></li>
        <li><NuxtLink to="/submit" :class="route.path === '/submit' ? 'highlight' : ''">Submit Site</NuxtLink></li>
        <li><NuxtLink to="https://git.inspin.io/ryan/hns.ws/releases" target="_Blank">Changelog</NuxtLink></li>
      </ul>
      <div class="search">
        <input placeholder="Enter a Handshake address">
        <a class="redirect"><span class="icon-arrow-right"></span></a>
      </div>
      <div class="menu-btn" v-if="isMobile" >
        <span v-if="!menu" class="icon-menu" @click="openMenu()"></span>
        <span v-if="menu" class="icon-x" @click="closeMenu()"></span>
      </div>
      <div class="menu" v-if="menu">
        <ul class="links" @click="closeMenu()">
          <li><NuxtLink to="/about">About</NuxtLink></li>
          <li><NuxtLink to="https://decentralizers.com/" target="_Blank">News</NuxtLink></li>
          <li><NuxtLink to="/submit">Submit Site</NuxtLink></li>
          <li><NuxtLink to="https://git.inspin.io/ryan/hns.ws/releases" target="_Blank">Changelog</NuxtLink></li>
        </ul>
      </div>
    </div>
  </header>
</template>