%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="fixed left-0 top-0 z-40 w-full">
<client-only>
<CookieBanner />
</client-only>
<header class="w-full grid grid-cols-2 lg:grid-cols-8 py-4 px-4 md:px-8 bg-white shadow">
<div class="lg:col-span-2 flex items-center">
<NuxtLink to="/">
<img class="h-8 max-w-full block sm:hidden"
src="~assets/images/logo-small.svg"
alt="Take a seat" />
<img class="h-8 max-w-full hidden sm:block"
src="~assets/images/logo.svg"
alt="Take a seat" />
</NuxtLink>
</div>
<div
v-if="isLoggedIn == false"
class="lg:col-span-6 flex justify-end lg:grid lg:grid-cols-3">
<div class="order-2 lg:order-1 lg:col-span-2 flex items-center justify-center">
<LoggedOutMenu />
</div>
<div class="order-1 lg:order-2 flex items-center justify-end">
<NuxtLink
class="account-button relative z-30 whitespace-nowrap"
to="/register/therapist">Join us</NuxtLink>
<LazyLoginForm />
</div>
</div>
<div
v-else
:class="isLoggedIn == false ? 'lg:col-span-2' : 'lg:col-span-6'"
class="flex justify-end items-center">
<LoggedInMenu v-if="isLoggedIn == true" />
<NuxtLink
to="/therapist/messages"
class="relative order-2 bg-gray p-2 ml-2 lg:mr-3 rounded-full flex items-center justify-center">
<div class="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-blue-light text-white text-xs flex items-center justify-center">{{ messageCount }}</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
</svg>
</NuxtLink>
<div @mouseenter="isDropdownOpen = true"
@mouseleave="isDropdownOpen = false"
class="relative order-1 lg:order-3">
<NuxtLink
:to="role == 'therapist' ? '/account' : '/account/financial'"
class="flex items-center justify-center bg-gray pr-3 pl-3 sm:pl-4 py-2 rounded-xl text-black text-sm font-medium uppercase focus:outline-none hover:bg-gray transition">
<span>Account</span>
<svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</NuxtLink>
<div v-if="isDropdownOpen"
class="absolute top-full right-0 w-full bg-gray shadow rounded-lg overflow-hidden">
<template v-if="role == 'therapist'">
<NuxtLink class="block w-full px-3 py-2 text-sm leading-5 transition hover:bg-white"
to="/account">Profile</NuxtLink>
<NuxtLink class="block w-full px-3 py-2 text-sm leading-5 transition hover:bg-white"
to="/account/availability">Availability</NuxtLink>
</template>
<NuxtLink class="block w-full px-3 py-2 text-sm leading-5 transition hover:bg-white"
to="/account/financial">Financial</NuxtLink>
<NuxtLink class="block w-full px-3 py-2 text-sm leading-5 transition hover:bg-white"
to="/account/settings">Settings</NuxtLink>
<button @click="logout"
class="block w-full border-t border-white text-left px-3 py-2 text-sm leading-5 transition hover:bg-white">Logout</button>
</div>
</div>
</div>
</header>
</div>
</template>
<script>
export default {
data() {
return {
isDropdownOpen: false
}
},
computed: {
isLoggedIn() {
return this.$auth.loggedIn;
},
user() {
return this.$auth.user;
},
messages() {
return this.$store.state.therapist.messages.list
},
role() {
if(this.$auth.loggedIn == true) {
return this.$auth.user.data.role.name;
}
return 'all';
},
messageCount() {
return this.messages.filter(function (item) {
return item.read == false;
}).length
}
},
async mounted() {
if(this.isLoggedIn == true) {
await this.$store.dispatch('therapist/messages/get', {
user_id: this.user.data.id
})
}
},
methods: {
async logout() {
await this.$auth.logout();
}
}
}
</script>
Zerion Mini Shell 1.0