<script setup>
  const { isDesktopOrTablet } = useDevice();
</script>

<template>
  <header>
    <div class="center">
      <NuxtLink to="/"><h1>Ryan Moon</h1></NuxtLink>
      <div class="nav" >
        <NuxtLink to="/about"><h2>About</h2></NuxtLink>
        <!-- <NuxtLink to="/blog"><h2>blog</h2></NuxtLink> -->
        <NuxtLink to="/donate"><h2>Donate</h2></NuxtLink>
        <NuxtLink to="/contact" v-if="isDesktopOrTablet" ><h2 class="cta">Get in touch</h2></NuxtLink>
      </div>
      
      <!--
      <span className="icon-menu" @click="setStatus(true)"></span>
      <div class="topnav">
        <div id="myLinks">
          <span className="icon-x" @click="setStatus(false)"></span>
          <a href="#news">News</a>
          <a href="#contact">Contact</a>
          <a href="#about">About</a>
        </div>
      </div>
      -->

    </div>
  </header>
</template>