ff-admin/src/components/UserMenu.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>
            <button primary-outline @click="logoutAccount">ausloggen</button>
          </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>