read notification on click working

src/views/Notifications.vue

@@ -42,38 +42,34 @@
           class="notification | bg-white rounded-lg | p-16 | flow"
           :data-status="notification.isRead ? 'read' : 'unread'"
           :data-type="notification.type"
+          @click="read(notification)"
         >
-          <router-link
-            v-if="currentTab === 'all' || !notification.isRead"
-            :to="toPath(notification.location.href)"
-          >
-            <header>
-              <p class="flex">
-                <strong
-                  class="notification__type | font-medium text-primary"
-                  :data-icon="notification.type"
-                  >Nouveau
-                  {{
-                    notification.type === "comment" ? "commentaire" : "contenu"
-                  }}</strong
-                >
-                <span class="notification__client | text-grey-700">{{
-                  notification.location.project.title
-                }}</span>
-                <time
-                  datetime=""
-                  class="notification__date | text-grey-700 | ml-auto"
-                  >{{ formatDate(notification) }}</time
-                >
-              </p>
-            </header>
-            <p
-              v-if="notification.type"
-              class="notification__body | text-md font-medium | line-clamp"
-            >
-              {{ notification.text }}
+          <header>
+            <p class="flex">
+              <strong
+                class="notification__type | font-medium text-primary"
+                :data-icon="notification.type"
+                >Nouveau
+                {{
+                  notification.type === "comment" ? "commentaire" : "contenu"
+                }}</strong
+              >
+              <span class="notification__client | text-grey-700">{{
+                notification.location.project.title
+              }}</span>
+              <time
+                datetime=""
+                class="notification__date | text-grey-700 | ml-auto"
+                >{{ formatDate(notification) }}</time
+              >
             </p>
-          </router-link>
+          </header>
+          <p
+            v-if="notification.type"
+            class="notification__body | text-md font-medium | line-clamp"
+          >
+            {{ notification.text }}
+          </p>
         </article>
       </template>
       <!-- <article
@@ -112,6 +108,7 @@ import { useUserStore } from "../stores/user";
 import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useApiStore } from "../stores/api";
+import { useRouter } from "vue-router";
 
 dayjs.locale("fr");
 
@@ -138,6 +135,8 @@ const tabs = computed(() => {
   ];
 });
 
+const router = useRouter();
+
 const sortedNotifications = computed(() => {
   return [...notifications.value].sort((a, b) => {
     return dayjs(b.date).diff(dayjs(a.date));
@@ -173,6 +172,15 @@ function readAll() {
   }
 }
 
+function read(notification) {
+  if (!notification.isRead) {
+    api.readNotification(notification.id).then((res) => {
+      router.push(toPath(notification.location.href));
+    });
+  }
+  router.push(toPath(notification.location.href));
+}
+
 function toPath(string) {
   return string.replace(window.location.origin, "");
 }
@@ -198,6 +206,7 @@ main > header [role="tablist"] {
   --flow-space: var(--space-12);
   font-size: var(--text-sm);
   position: relative;
+  cursor: pointer;
 }
 .notification[data-status="unread"]::after {
   content: "";