%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<nav class="lg:col-span-4 lg:flex lg:items-center lg:justify-center">
<div class="hidden lg:block">
<NuxtLink
v-for="(link, key) in links"
v-bind:key="key"
class="nav-link"
:to="link.url">{{ link.name }}</NuxtLink>
</div>
<div class="ml-5 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: [
{
name: 'Therapists',
url: '/therapists'
},
{
name: 'Blog',
url: '/blog'
},
{
name: 'About',
url: '/about'
},
{
name: 'Community',
url: '/community'
},
{
name: 'Partnerships',
url: '/partnerships'
},
{
name: 'Help',
url: '/help'
}
]
}
},
methods: {
onLinkClick() {
this.menuOpen = false;
}
}
}
</script>
<style lang="postcss" scoped>
.nav-link {
@apply mx-3 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