From a01d058227b093202a1885d4fb3b37c651829cae Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 17 Oct 2024 16:52:49 +0200
Subject: [PATCH] Refactor notification menu button

---
 .../components/header/MainNavigationBar.vue   | 26 ++--------------
 .../components/header/NotificationButton.vue  | 31 +++++++++++++++++++
 2 files changed, 33 insertions(+), 24 deletions(-)
 create mode 100644 client/src/components/header/NotificationButton.vue

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 06e6a5c7..d408e2e3 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
-import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
-import { useNotificationsStore } from "@/stores/notifications";
 import { useNavigationAttributes } from "@/utils/navigation";
 import { useRouteLookups } from "@/utils/route";
 import {
@@ -17,12 +14,12 @@ import log from "loglevel";
 import { computed, onMounted } from "vue";
 import DefaultNavigation from "./DefaultNavigation.vue";
 import MobileMenuButton from "./MobileMenuButton.vue";
+import NotificationButton from "./NotificationButton.vue";
 import ProfileMenuButton from "./ProfileMenuButton.vue";
 
 log.debug("MainNavigationBar created");
 
 const courseSessionsStore = useCourseSessionsStore();
-const notificationsStore = useNotificationsStore();
 const {
   inCockpit,
   inCompetenceProfile,
@@ -38,7 +35,6 @@ const {
   hasCockpitMenu,
   hasPreviewMenu,
   hasAppointmentsMenu,
-  hasNotificationsMenu,
   hasLearningMentor,
   hasSessionTitle,
 } = useNavigationAttributes();
@@ -177,25 +173,7 @@ const mentorTabTitle = computed(() =>
           </router-link>
 
           <!-- Notification Bell & Menu -->
-          <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>
+          <NotificationButton />
 
           <div
             v-if="hasSessionTitle"
diff --git a/client/src/components/header/NotificationButton.vue b/client/src/components/header/NotificationButton.vue
new file mode 100644
index 00000000..17c7b226
--- /dev/null
+++ b/client/src/components/header/NotificationButton.vue
@@ -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>