55 lines
1.9 KiB
Vue
55 lines
1.9 KiB
Vue
<template>
|
|
<Menu as="div" class="relative inline-block text-left self-center">
|
|
<MenuButton class="cursor-pointer flex flex-row gap-2 p-1 w-fit h-fit box-content self-center">
|
|
<UserIcon class="text-gray-500 h-6 w-6 cursor-pointer" />
|
|
</MenuButton>
|
|
|
|
<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="absolute right-0 mt-2 w-56 z-10 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
|
>
|
|
<div class="px-3 py-1 pt-2">
|
|
<p class="text-xs">Angemeldet als</p>
|
|
<p class="font-bold leading-4 text-base">{{ firstname + " " + lastname }}</p>
|
|
</div>
|
|
<div class="px-1 py-1 w-full flex flex-col gap-2">
|
|
<MenuItem v-slot="{ close }">
|
|
<RouterLink to="/account">
|
|
<button button primary @click="close">Mein Account</button>
|
|
</RouterLink>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<span>
|
|
<button primary-outline @click="logoutAccount">ausloggen</button>
|
|
</span>
|
|
</MenuItem>
|
|
</div>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
|
|
import { mapState, mapActions } from "pinia";
|
|
import { UserIcon } from "@heroicons/vue/24/outline";
|
|
import { useAccountStore } from "@/stores/account";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
computed: {
|
|
...mapState(useAccountStore, ["firstname", "lastname"]),
|
|
},
|
|
methods: {
|
|
...mapActions(useAccountStore, ["logoutAccount"]),
|
|
},
|
|
};
|
|
</script>
|