Enhance mobile menu with badge support for notifications and refactor button structure for improved styling

Author: sondreb

src/app/shared/mobile-menu/mobile-menu.html

@@ -14,25 +14,26 @@
       mat-button 
       class="mobile-nav-button" 
       [routerLink]="['/people']">
-      <div style="display: flex; flex-direction: column; align-items: center;">
+      <div class="mobile-nav-button-content">
         <mat-icon>people</mat-icon>
         <span>{{ 'App.People' | translate }}</span>
       </div>
     </button>
+
     <button 
     mat-button 
     class="mobile-nav-button" 
     [routerLink]="['/notifications']">
-    <div style="display: flex; flex-direction: column; align-items: center;">
-      <mat-icon>notifications</mat-icon>
+    <div class="mobile-nav-button-content">
+      <mat-icon aria-hidden="false" [matBadgeHidden]="(ui.unreadNotifications$ | async) == 0" [matBadge]="ui.unreadNotifications$ | async">notifications</mat-icon>
       <span>{{ 'App.Notifications' | translate }}</span>
     </div>
   </button>
   <button 
   mat-button 
   class="mobile-nav-button" 
   [routerLink]="['/p', appState.getPublicKey()]">
-  <div style="display: flex; flex-direction: column; align-items: center;">
+  <div class="mobile-nav-button-content">
     <mat-icon>person</mat-icon>
     <span>{{ 'App.Profile' | translate }}</span>
   </div>

src/app/shared/mobile-menu/mobile-menu.ts

@@ -8,17 +8,20 @@ import { RouterModule } from '@angular/router';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { TranslateModule } from '@ngx-translate/core';
 import { ApplicationState } from 'src/app/services/applicationstate';
+import { MatBadgeModule } from '@angular/material/badge';
+import { UIService } from 'src/app/services/ui';
 
 @Component({
   selector: 'app-mobile-menu',
   templateUrl: './mobile-menu.html',
   styleUrls: ['./mobile-menu.css'],
-  imports: [MatToolbarModule, TranslateModule, RouterModule, MatButtonModule, MatIconModule, CommonModule, MatSliderModule, FormsModule],
+  imports: [MatToolbarModule, MatBadgeModule, TranslateModule, RouterModule, MatButtonModule, MatIconModule, CommonModule, MatSliderModule, FormsModule],
 })
 export class MobileMenuComponent {
   @Input() miniplayer = false;
 
   appState = inject(ApplicationState);
+  ui = inject(UIService);
 
   constructor() {}