ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor notification menu button

This commit is contained in:
Ramon Wenger 2024-10-17 16:52:49 +02:00
parent b833fa34b1
commit a01d058227
2 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/components/header/MainNavigationBar.vue
View File

@ -1,8 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions"; import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useNotificationsStore } from "@/stores/notifications";
import { useNavigationAttributes } from "@/utils/navigation"; import { useNavigationAttributes } from "@/utils/navigation";
import { useRouteLookups } from "@/utils/route"; import { useRouteLookups } from "@/utils/route";
import { import {
@ -17,12 +14,12 @@ import log from "loglevel";
import { computed, onMounted } from "vue"; import { computed, onMounted } from "vue";
import DefaultNavigation from "./DefaultNavigation.vue"; import DefaultNavigation from "./DefaultNavigation.vue";
import MobileMenuButton from "./MobileMenuButton.vue"; import MobileMenuButton from "./MobileMenuButton.vue";
import NotificationButton from "./NotificationButton.vue";
import ProfileMenuButton from "./ProfileMenuButton.vue"; import ProfileMenuButton from "./ProfileMenuButton.vue";
log.debug("MainNavigationBar created"); log.debug("MainNavigationBar created");
const courseSessionsStore = useCourseSessionsStore(); const courseSessionsStore = useCourseSessionsStore();
const notificationsStore = useNotificationsStore();
const { const {
inCockpit, inCockpit,
inCompetenceProfile, inCompetenceProfile,
@ -38,7 +35,6 @@ const {
hasCockpitMenu, hasCockpitMenu,
hasPreviewMenu, hasPreviewMenu,
hasAppointmentsMenu, hasAppointmentsMenu,
hasNotificationsMenu,
hasLearningMentor, hasLearningMentor,
hasSessionTitle, hasSessionTitle,
} = useNavigationAttributes(); } = useNavigationAttributes();
@ -177,25 +173,7 @@ const mentorTabTitle = computed(() =>
</router-link> </router-link>
<!-- Notification Bell & Menu --> <!-- Notification Bell & Menu -->
<div v-if="hasNotificationsMenu" class="nav-item leading-none"> <NotificationButton />
<NotificationPopover>
<template #toggleButtonContent>
<div class="relative h-8 w-8">
<div>
<it-icon-notification class="h-8 w-8" />
<div
v-if="notificationsStore.hasUnread"
aria-label="unread notifications"
class="absolute inset-y-0 right-0 h-1.5 w-1.5 rounded-full bg-sky-500"
/>
</div>
</div>
</template>
<template #popoverContent>
<NotificationPopoverContent />
</template>
</NotificationPopover>
</div>
<div <div
v-if="hasSessionTitle" v-if="hasSessionTitle"

31
client/src/components/header/NotificationButton.vue Normal file
View File

@ -0,0 +1,31 @@
<script setup lang="ts">
import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
import { useNotificationsStore } from "@/stores/notifications";
import { useNavigationAttributes } from "@/utils/navigation";
const notificationsStore = useNotificationsStore();
const { hasNotificationsMenu } = useNavigationAttributes();
</script>
<template>
<div v-if="hasNotificationsMenu" class="nav-item leading-none">
<NotificationPopover>
<template #toggleButtonContent>
<div class="relative h-8 w-8">
<div>
<it-icon-notification class="h-8 w-8" />
<div
v-if="notificationsStore.hasUnread"
aria-label="unread notifications"
class="absolute inset-y-0 right-0 h-1.5 w-1.5 rounded-full bg-sky-500"
/>
</div>
</div>
</template>
<template #popoverContent>
<NotificationPopoverContent />
</template>
</NotificationPopover>
</div>
</template>