fix: show notification dot in collapsed menu

Render a plain red dot instead of the unread count in the collapsed
sidebar so it no longer overlaps the bell icon.

Signed-off-by: Alex Piatakov <alex.piatakov@swirldslabs.com>

Author: Pyatakov

frontend/src/app/components/notification/notification.component.html

@@ -2,9 +2,10 @@
     <div
         *ngIf="unreadNotifications > 0"
         (click)="onMenuOpened($event, notificationMenu)"
-        class="badge"
+        [class.badge]="!compact"
+        [class.badge-dot]="compact"
     >
-        <span class="notification-counter">
+        <span *ngIf="!compact" class="notification-counter">
             {{ unreadNotifications }}
         </span>
     </div>

frontend/src/app/components/notification/notification.component.scss

@@ -57,6 +57,18 @@
     }
 }
 
+.badge-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #ff432a;
+    cursor: pointer;
+
+    &:hover {
+        filter: brightness(1.2);
+    }
+}
+
 .notification-position {
     pointer-events: none;
     position: fixed;

frontend/src/app/components/notification/notification.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { NotificationType, NotifyAPI, } from '@guardian/interfaces';
 import { ToastrService } from 'ngx-toastr';
@@ -19,6 +19,9 @@ export class NotificationComponent implements OnInit {
     menuOpened: boolean = false;
     subscription = new Subscription();
 
+    /** Show a plain red dot instead of the unread count (used in the collapsed menu). */
+    @Input() compact: boolean = false;
+
     @Output() menuOpenedChange = new EventEmitter<boolean>();
 
     viewDetails($event: MouseEvent, notification: any) {

frontend/src/app/views/new-header/new-header.component.html

@@ -110,7 +110,7 @@
     <i class="pi pi-bell item-icon"></i>
     @if (menuCollapsed && layout === 'vertical') {
       <div class="collapsed-notify-counter">
-        <app-notification></app-notification>
+        <app-notification [compact]="true"></app-notification>
       </div>
     }
     <div [class.hidden-logotype]="menuCollapsed && layout === 'vertical'" class="span-icon">