Move profile button to own component
This commit is contained in:
parent
ebdd175082
commit
b833fa34b1
|
|
@ -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
|
||||
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>
|
||||
<ProfileMenuButton />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue