crbtc.org/components/Header.vue

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

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

  console.log(user)
</script>

<template>
  <header>
    <NuxtLink to="/" class="logo"><h1>Capital <br/>Region <br/>Bitcoin <br/>Network</h1></NuxtLink>
    <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="/members" 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">
        <p >{{user.first_name}}</p>
        <p @click="logout" >Logout</p>
      </div>
    </div>
  </header>
</template>