56 lines
2.4 KiB
Vue
56 lines
2.4 KiB
Vue
<script setup>
|
|
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
|
|
import { ChevronDownIcon } from "@heroicons/vue/20/solid";
|
|
import ResponsiveNavLink from "../ResponsiveNavLink.vue";
|
|
</script>
|
|
|
|
<template>
|
|
<Menu as="div" class="relative inline-block text-left z-50">
|
|
<div>
|
|
<MenuButton
|
|
class="inline-flex w-full justify-center items-center rounded bg-zinc-400/50 border border-zinc-400/50 px-4 py-2 font-medium text-white hover:bg-opacity-30 hover:bg-zinc-400/20 hover:border-zinc-400/20"
|
|
>
|
|
{{ $page.props.auth.user.name }}
|
|
<ChevronDownIcon class="ml-2 h-5 w-5" aria-hidden="true" />
|
|
</MenuButton>
|
|
</div>
|
|
|
|
<transition
|
|
enter-active-class="transition duration-100 ease-out"
|
|
enter-from-class="transform scale-95 opacity-0"
|
|
enter-to-class="transform scale-100 opacity-100"
|
|
leave-active-class="transition duration-75 ease-in"
|
|
leave-from-class="transform scale-100 opacity-100"
|
|
leave-to-class="transform scale-95 opacity-0"
|
|
>
|
|
<MenuItems
|
|
class="border border-gray-700 absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-zinc-900 focus:outline-none"
|
|
>
|
|
<div class="px-1 py-1">
|
|
<MenuItem v-slot="{ active }">
|
|
<ResponsiveNavLink
|
|
:href="route('profile.edit')"
|
|
:class="[
|
|
'group flex w-full items-center rounded-md py-2',
|
|
]"
|
|
>
|
|
Profile
|
|
</ResponsiveNavLink>
|
|
</MenuItem>
|
|
<MenuItem v-slot="{ active }">
|
|
<ResponsiveNavLink
|
|
:href="route('logout')"
|
|
:class="[
|
|
'group flex w-full items-center rounded-md py-2',
|
|
]"
|
|
:active="true"
|
|
method="post"
|
|
>
|
|
Log Out
|
|
</ResponsiveNavLink>
|
|
</MenuItem>
|
|
</div>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
</template>
|