Code: Select all
<ul v-if="username"
class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 border-bottom-1 lg:border-top-none lg:border-bottom-none border-gray-300 bg-white">
<li class="lg:relative">
<a class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 font-medium border-round cursor-pointer transition-colors transition-duration-150"
v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
<span v-text="username" class="text-sm"/>
<i class="pi pi-angle-down ml-auto lg:ml-2"></i>
</a>
<ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
<li v-for="entry in userEntries">
<Link :href="entry.url"
v-text="entry.label"
class="flex no-underline p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150">
</Link>
</li>
</ul>
</li>
</ul>