feat: manually close popovers

client/src/components/header/AccountMenu.vue

@@ -5,6 +5,7 @@
     :user="userStore"
     @logout="logout"
     @select-course-session="selectCourseSession"
+    @close="emit('close')"
   />
 </template>
 
@@ -14,6 +15,8 @@ import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useUserStore } from "@/stores/user";
 import type { CourseSession } from "@/types";
 
+const emit = defineEmits(["close"]);
+
 const logout = () => {
   userStore.handleLogout();
 };

client/src/components/header/AccountMenuContent.vue

@@ -2,7 +2,6 @@
 import CourseSessionsMenu from "@/components/header/CourseSessionsMenu.vue";
 import type { User } from "@/stores/user";
 import type { CourseSession } from "@/types";
-import { PopoverButton } from "@headlessui/vue";
 import { useRouter } from "vue-router";
 
 const props = defineProps<{
@@ -11,12 +10,13 @@ const props = defineProps<{
   selectedCourseSession?: string;
 }>();
 
-const emit = defineEmits(["selectCourseSession", "logout"]);
+const emit = defineEmits(["selectCourseSession", "logout", "close"]);
 
 const router = useRouter();
 
 async function navigate(routeName: string) {
   await router.push({ name: routeName });
+  emit("close");
 }
 </script>
 
@@ -34,9 +34,9 @@ async function navigate(routeName: string) {
         <div class="ml-6">
           <h3>{{ user.first_name }} {{ user.last_name }}</h3>
           <div class="mb-3 text-sm text-gray-800">{{ user.email }}</div>
-          <PopoverButton @click="navigate('personalProfile')">
+          <button class="underline" @click="navigate('personalProfile')">
             {{ $t("a.Profil anzeigen") }}
-          </PopoverButton>
+          </button>
         </div>
       </div>
     </div>

client/src/components/header/MainNavigationBar.vue

@@ -133,7 +133,7 @@ const hasMentorManagementMenu = computed(() => {
         :show="state.showMobileProfileMenu"
         @closemodal="state.showMobileProfileMenu = false"
       >
-        <AccountMenu />
+        <AccountMenu @close="state.showMobileProfileMenu = false" />
       </ItFullScreenModal>
     </Teleport>
     <Transition name="nav">
@@ -325,10 +325,11 @@ const hasMentorManagementMenu = computed(() => {
                     </PopoverButton>
 
                     <PopoverPanel
+                      v-slot="{ close }"
                       class="absolute -right-2 top-8 z-50 w-[500px] bg-white shadow-lg"
                     >
                       <div class="p-4">
-                        <AccountMenu />
+                        <AccountMenu @close="close" />
                       </div>
                     </PopoverPanel>
                   </Popover>