Move profile button to own component

client/src/components/header/MainNavigationBar.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import AccountMenu from "@/components/header/AccountMenu.vue";
 import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
 import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
-import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
-import { getLoginURL } from "@/router/utils";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useNotificationsStore } from "@/stores/notifications";
-import { useUserStore } from "@/stores/user";
 import { useNavigationAttributes } from "@/utils/navigation";
 import { useRouteLookups } from "@/utils/route";
 import {
@@ -16,18 +12,15 @@ import {
   getLearningPathUrl,
   getMediaCenterUrl,
 } from "@/utils/utils";
-import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
-import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { useTranslation } from "i18next-vue";
 import log from "loglevel";
-import { computed, onMounted, reactive } from "vue";
+import { computed, onMounted } from "vue";
 import DefaultNavigation from "./DefaultNavigation.vue";
 import MobileMenuButton from "./MobileMenuButton.vue";
+import ProfileMenuButton from "./ProfileMenuButton.vue";
 
 log.debug("MainNavigationBar created");
 
-const breakpoints = useBreakpoints(breakpointsTailwind);
-const userStore = useUserStore();
 const courseSessionsStore = useCourseSessionsStore();
 const notificationsStore = useNotificationsStore();
 const {
@@ -51,17 +44,6 @@ const {
 } = useNavigationAttributes();
 
 const { t } = useTranslation();
-const state = reactive({
-  showMobileNavigationMenu: false,
-  showMobileProfileMenu: false,
-});
-
-function popoverClick(event: Event) {
-  if (breakpoints.smaller("lg").value) {
-    event.preventDefault();
-    state.showMobileProfileMenu = true;
-  }
-}
 
 const selectedCourseSessionTitle = computed(() => {
   return courseSessionsStore.currentCourseSession?.title;
@@ -88,15 +70,6 @@ const mentorTabTitle = computed(() =>
 </script>
 
 <template>
-  <Teleport to="body">
-    <ItFullScreenModal
-      v-if="userStore.loggedIn"
-      :show="state.showMobileProfileMenu"
-      @closemodal="state.showMobileProfileMenu = false"
-    >
-      <AccountMenu @close="state.showMobileProfileMenu = false" />
-    </ItFullScreenModal>
-  </Teleport>
   <nav class="bg-blue-900 text-white">
     <div class="mx-auto px-4 lg:px-8">
       <div class="relative flex h-16 justify-between">
@@ -234,38 +207,7 @@ const mentorTabTitle = computed(() =>
           </div>
 
           <div class="nav-item">
-            <div
+            <ProfileMenuButton />
-              v-if="userStore.loggedIn"
-              class="flex items-center"
-              data-cy="header-profile"
-            >
-              <Popover class="relative">
-                <PopoverButton @click="popoverClick($event)">
-                  <div v-if="userStore.avatar_url">
-                    <img
-                      class="inline-block h-8 w-8 rounded-full"
-                      :src="userStore.avatar_url"
-                      alt=""
-                    />
-                  </div>
-                  <div v-else>
-                    {{ userStore.getFullName }}
-                  </div>
-                </PopoverButton>
-
-                <PopoverPanel
-                  v-slot="{ close }"
-                  class="absolute -right-2 top-8 z-50 w-[500px] bg-white shadow-lg"
-                >
-                  <div class="p-4">
-                    <AccountMenu @close="close" />
-                  </div>
-                </PopoverPanel>
-              </Popover>
-            </div>
-            <div v-else>
-              <a class="" :href="getLoginURL({ lang: userStore.language })">Login</a>
-            </div>
           </div>
         </div>
       </div>

client/src/components/header/ProfileMenuButton.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import AccountMenu from "@/components/header/AccountMenu.vue";
+import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
+import { getLoginURL } from "@/router/utils";
+import { useUserStore } from "@/stores/user";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
+import { ref } from "vue";
+
+const userStore = useUserStore();
+const breakpoints = useBreakpoints(breakpointsTailwind);
+
+const showMenu = ref(false);
+
+function popoverClick(event: Event) {
+  if (breakpoints.smaller("lg").value) {
+    event.preventDefault();
+    showMenu.value = true;
+  }
+}
+</script>
+<template>
+  <Teleport to="body">
+    <ItFullScreenModal
+      v-if="userStore.loggedIn"
+      :show="showMenu"
+      @closemodal="showMenu = false"
+    >
+      <AccountMenu @close="showMenu = false" />
+    </ItFullScreenModal>
+  </Teleport>
+  <div v-if="userStore.loggedIn" class="flex items-center" data-cy="header-profile">
+    <Popover class="relative">
+      <PopoverButton @click="popoverClick($event)">
+        <div v-if="userStore.avatar_url">
+          <img
+            class="inline-block h-8 w-8 rounded-full"
+            :src="userStore.avatar_url"
+            alt=""
+          />
+        </div>
+        <div v-else>
+          {{ userStore.getFullName }}
+        </div>
+      </PopoverButton>
+
+      <PopoverPanel
+        v-slot="{ close }"
+        class="absolute -right-2 top-8 z-50 w-[500px] bg-white shadow-lg"
+      >
+        <div class="p-4">
+          <AccountMenu @close="close" />
+        </div>
+      </PopoverPanel>
+    </Popover>
+  </div>
+  <div v-else>
+    <a class="" :href="getLoginURL({ lang: userStore.language })">Login</a>
+  </div>
+</template>