49 lines
2.2 KiB
Vue
49 lines
2.2 KiB
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" >inspin.digital</NuxtLink>
|
|
<ul class="links">
|
|
<li><NuxtLink to="/about" :class="route.path === '/about' ? 'highlight' : ''">About</NuxtLink></li>
|
|
<li><NuxtLink to="/products" :class="route.path === '/products' ? 'highlight' : ''">Products</NuxtLink></li>
|
|
<li><NuxtLink to="/resources" :class="route.path === '/resources' ? 'highlight' : ''">Resources</NuxtLink></li>
|
|
<li><NuxtLink to="/articles" :class="route.path === '/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 === 'settings' ? 'highlight' : ''">{{ user.first_name }} {{ user.last_name }}</NuxtLink></li>
|
|
<li><NuxtLink to="/dashboard" :class="route.name === 'dashboard' ? 'highlight' : ''">Dashboard</NuxtLink></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav" v-if="isMobileOrTablet">
|
|
<NuxtLink to="/" class="logo" >inspin.digital</NuxtLink>
|
|
<span class="icon-bars" @click="openMenu()"></span>
|
|
<div class="menu" v-if="menu">
|
|
<NuxtLink to="/" class="logo" @click="closeMenu()">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> |