crbtc.org/components/Header.vue

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

  const user = useDirectusUser();
  const { logout } = useDirectusAuth()

  /* <NuxtLink to="/" class="logo"><h1>Capital <br/>Region <br/>Bitcoin <br/>Network</h1></NuxtLink> */
  /* <a @click="logout" ><h2>Logout</h2></a> */
</script>

<template>
  <header>
    <div class="logo">
      <NuxtLink to="/">
        <img src="/img/logo.png" alt="Capital Region Bitcoin Network">
      </NuxtLink>
    </div>
    <div class="nav" >
      <NuxtLink to="/about"><h2>About</h2></NuxtLink>
      <NuxtLink to="/#guides"><h2>Guides</h2></NuxtLink>
      <NuxtLink to="/#events" ><h2>Events</h2></NuxtLink>
      <NuxtLink to="/" v-if="isDesktopOrTablet" ><h2>Members</h2></NuxtLink>
    </div>
    <div class="auth" v-if="isDesktopOrTablet">
      <div class="links" v-if="!user">
        <NuxtLink to="/register"><h2>Register</h2></NuxtLink>
        <NuxtLink to="/login"><h2>Sign in</h2></NuxtLink>
      </div>
      <div class="user" v-if="user">
        <NuxtLink :to="'/u/' + user.external_identifier"><h2>{{user.first_name}}</h2></NuxtLink>
      </div>
    </div>
  </header>
</template>