feat: add unread notifications feature and enhance notification display

app/components/Header.vue

@@ -26,7 +26,7 @@ onUnmounted(() => {
   }
 })
 
-const { isAuthenticated, user, logout } = useAuth()
+const { isAuthenticated, user, logout, hasUnreadNotifications } = useAuth()
 const panelLabel = computed(() => isAdmin(user.value?.role) ? 'Pannello' : 'Dashboard')
 
 const navLinks = [
@@ -70,8 +70,9 @@ const navLinks = [
 
                   <NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
                             data-element="personal-area-dashboard" data-focus-mouse="false">
-                    <span class="rounded-icon" aria-hidden="true">
+                    <span class="rounded-icon profile-icon-wrap" aria-hidden="true">
                       <BIIcon name="it-user" color="black"/>
+                      <span v-if="hasUnreadNotifications" class="notification-dot"></span>
                     </span>
                     <span class="d-none d-lg-block">{{ user?.first_name }}</span>
                   </NuxtLink>
@@ -215,7 +216,7 @@ const navLinks = [
     visibility: visible;
   }
 
-  .navbar-collapsable {
+.navbar-collapsable {
     position: fixed !important;
     top: 0;
     left: 0;
@@ -294,4 +295,19 @@ const navLinks = [
   height: 48px;
   margin-inline: 16px;
 }
-</style>
+
+.profile-icon-wrap {
+  position: relative;
+}
+
+.notification-dot {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #d9364f;
+  border: 2px solid #ffffff;
+}
+</style>