main layout

src/components/UserMenu.vue

@@ -0,0 +1,53 @@
+<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/outline";
+import { useAccountStore } from "@/stores/account";
+</script>
+
+<script lang="ts">
+export default {
+  computed: {
+    ...mapState(useAccountStore, ["firstname", "lastname"]),
+  },
+  methods: {
+    ...mapActions(useAccountStore, ["logoutAccount"]),
+  },
+};
+</script>