%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<nav class="relative">
<button @click="menuOpen =! menuOpen"
class="flex md:hidden items-center justify-center w-full focus:outline-none">
<div class="relative w-8">
<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>
</div>
<span class="block ml-3 font-bold">Menu</span>
</button>
<div class="hidden md:flex flex-wrap items-center justify-center">
<div
v-for="(link, key) in links"
v-bind:key="key">
<NuxtLink
v-if="link.role == 'all' || role == link.role"
class="account-nav-link"
:to="link.url">{{ link.name }}</NuxtLink>
</div>
<button
@click="logout"
class="account-nav-link"
type="button">Log Out</button>
</div>
<div v-if="menuOpen == true"
@click="menuOpen = false"
class="fixed z-40 top-0 left-0 w-full h-full"></div>
<div v-if="menuOpen == true"
class="fixed z-50 bottom-0 left-0 w-full p-3 rounded-t-xl bg-white block overflow-hidden md:hidden">
<div
v-for="(link, key) in links"
v-bind:key="key">
<NuxtLink
v-if="link.role == 'all' || role == link.role"
class="block w-full py-2 p-3 rounded-lg font-bold hover:bg-yellow"
:to="link.url">{{ link.name }}</NuxtLink>
</div>
<button
@click="logout"
class="block w-full py-2 p-3 rounded-lg font-bold hover:bg-yellow"
type="button">Log Out</button>
</div>
</nav>
</template>
<script>
export default {
data() {
return {
menuOpen: false,
links: [
{
role: 'therapist',
name: 'Profile',
url: '/account'
},
{
role: 'therapist',
name: 'Availability',
url: '/account/availability'
},
{
role: 'therapist',
name: 'Verification',
url: '/account/verification'
},
{
role: 'all',
name: 'Financial',
url: '/account/financial'
},
{
role: 'all',
name: 'Settings',
url: '/account/settings'
},
]
}
},
computed: {
role() {
if(this.$auth.loggedIn == true) {
return this.$auth.user.data.role.name;
}
return 'all';
}
},
methods: {
async logout() {
await this.$auth.logout()
}
}
}
</script>
Zerion Mini Shell 1.0