%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<nav class="ml-5 lg:mr-3 order-3 lg:order-1">
<div class="relative z-20 hidden lg:flex lg:items-center lg:justify-center">
<div v-for="(link, key) in links"
v-bind:key="key">
<NuxtLink
v-if="link.role == 'all' || role == link.role"
class="mx-2 xl:mx-3 nav-link"
:to="link.url">{{ link.name }}</NuxtLink>
</div>
</div>
<div class="block lg:hidden">
<button @click="menuOpen =! menuOpen"
class="block relative w-10 focus:outline-none">
<span :class="menuOpen ? 'rotate-45 translate-y-2' : ''"
class="block mb-1.5 h-1 w-full bg-black rounded transform transition duration-100"></span>
<span :class="menuOpen ? 'opacity-0' : ''"
class="block my-1.5 h-1 w-full bg-black rounded transform transition duration-100"></span>
<span :class="menuOpen ? '-rotate-45 -translate-y-3' : ''"
class="block mt-1.5 h-1 w-full bg-black rounded transform transition duration-100"></span>
</button>
<div v-if="menuOpen"
class="absolute z-20 top-full right-0 w-full bg-white shadow-lg">
<div v-for="(link, key) in links"
v-bind:key="key"
@click="onLinkClick">
<NuxtLink
v-if="link.role == 'all' || role == link.role"
class="mobile-nav-link px-4 md:px-8 py-3"
:to="link.url">{{ link.name }}</NuxtLink>
</div>
</div>
</div>
<div v-if="menuOpen"
@click="menuOpen = false"
class="fixed z-10 top-0 left-0 w-full h-full"></div>
</nav>
</template>
<script>
export default {
data() {
return {
menuOpen: false,
links: [
{
role: 'all',
name: 'Home',
url: '/therapist'
},
{
role: 'therapist',
name: 'Bookings',
url: '/therapist/bookings'
},
{
role: 'hero',
name: 'Bookings',
url: '/bookings'
},
{
role: 'therapist',
name: 'Clients',
url: '/therapist/clients'
},
{
role: 'therapist',
name: 'Money Manager',
url: '/therapist/money'
},
{
role: 'all',
name: 'Therapists',
url: '/therapists'
},
{
role: 'all',
name: 'Blog',
url: '/blog'
},
{
role: 'all',
name: 'Help',
url: '/help'
}
]
}
},
computed: {
role() {
if(this.$auth.loggedIn == true) {
return this.$auth.user.data.role.name;
}
return 'all';
}
},
methods: {
onLinkClick() {
this.menuOpen = false;
}
}
}
</script>
<style lang="postcss" scoped>
.nav-link {
@apply uppercase text-sm font-medium transition ease-in-out duration-200;
&:hover,
&.nuxt-link-exact-active {
@apply text-blue-light
}
}
.mobile-nav-link {
@apply block transition duration-100;
&:hover,
&.nuxt-link-exact-active {
@apply bg-yellow
}
}
</style>
Zerion Mini Shell 1.0