inspin.io/components/Header.vue

<script setup>
  const route = useRoute()
  const user = useDirectusUser()

  const { isMobileOrTablet, isDesktop } = useDevice()

  const menu = ref(false)

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

<template>
  <header v-if="route.path !== '/login'" >
    <div class="nav" v-if="isDesktop">
      <NuxtLink to="/" class="logo">
        <img src="/img/logo.svg" alt="inspin digital">
      </NuxtLink>
      <ul class="links">
        <li><NuxtLink to="/about" :class="route.path.includes('/about') ? 'highlight' : ''">About</NuxtLink></li>
        <li><NuxtLink to="/products" :class="route.path.includes('/products') ? 'highlight' : ''">Products</NuxtLink></li>
        <li><NuxtLink to="/resources" :class="route.path.includes('/resources') ? 'highlight' : ''">Resources</NuxtLink></li>
        <li><NuxtLink to="/articles" :class="route.path.includes('/articles') ? 'highlight' : ''">Articles</NuxtLink></li>
      </ul>
      <ul class="cta" v-if="!user">
        <li class="btn"><NuxtLink to="/contact">Get in touch</NuxtLink></li>
        <li><NuxtLink to="/login">Sign in</NuxtLink></li>
      </ul>
      <ul class="user" v-if="user">
        <li><NuxtLink to="/settings" :class="route.name.includes('settings') ? 'highlight' : ''">{{ user.first_name }} {{ user.last_name }}</NuxtLink></li>
        <li><NuxtLink to="/dashboard" :class="route.name.includes('dashboard') ? 'highlight' : ''">Dashboard</NuxtLink></li>
      </ul>
    </div>

    <div class="nav" v-if="isMobileOrTablet">
      <NuxtLink to="/" class="logo">
        <img src="/img/logo.svg" alt="inspin digital">
      </NuxtLink>
      <span class="icon-bars" @click="openMenu()"></span>
      <div class="menu" v-if="menu">
        <NuxtLink to="/" class="logo" @click="closeMenu()">
          <img src="/img/logo.svg" alt="inspin digital">
        </NuxtLink>
        <span class="icon-times" @click="closeMenu()"></span>
        <ul class="links" @click="closeMenu()">
          <li><NuxtLink to="/about">About</NuxtLink></li>
          <li><NuxtLink to="/products">Products</NuxtLink></li>
          <li><NuxtLink to="/resources">Resources</NuxtLink></li>
          <li><NuxtLink to="/articles">Articles</NuxtLink></li>
          <li class="cta"><NuxtLink to="/contact">Get in touch</NuxtLink></li>
        </ul>
      </div>
    </div>
  </header>
</template>