From 06197876e7dbc7c35a9b7fe149e37609761ffc47 Mon Sep 17 00:00:00 2001
From: Developer 02 <developer02@didaloghe.onmicrosoft.com>
Date: Thu, 8 Aug 2024 11:22:38 +0200
Subject: [PATCH] feat: Added conditional visibility for buttons based on
 service visibility state using `ngStyle`.

---
 .../src/app/components/nav-menu/nav-menu.component.html   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.html b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.html
index 4ee50f8..c07bc44 100644
--- a/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.html
+++ b/DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/nav-menu/nav-menu.component.html
@@ -31,16 +31,16 @@
       <div class="navbar-collapse justify-content-end me-5">
         <a class="navbar-brand" [routerLink]="['/']">User Manager Portal</a>
         <mat-slide-toggle *ngIf="isLogedIn()" [(ngModel)]="updateService.isEditable"></mat-slide-toggle>
-        <button *ngIf="isLogedIn()" class="btn" (click)="updateService.executeAll()">
+        <button *ngIf="isLogedIn()" class="btn" (click)="updateService.executeAll()" [ngStyle]="{ 'visibility': updateService.isVisible ? 'visible' : 'hidden' }">
           <mat-icon class="scale-pulse" [matBadge]="updateActCount === 0 ? '' : updateActCount">save</mat-icon>
         </button>
-        <button *ngIf="isLogedIn()" class="btn" (click)="creationService.openDialog()">
+        <button *ngIf="isLogedIn()" class="btn" (click)="creationService.openDialog()" [ngStyle]="{ 'visibility': creationService.isVisible ? 'visible' : 'hidden' }">
           <mat-icon class="scale-pulse">add_to_photos</mat-icon>
         </button>
-        <button *ngIf="isLogedIn()" class="btn" (click)="transferService.executeAll()">
+        <button *ngIf="isLogedIn()" class="btn" (click)="transferService.executeAll()" [ngStyle]="{ 'visibility': transferService.isVisible ? 'visible' : 'hidden' }">
           <mat-icon class="move-left-right">swap_horiz</mat-icon>
         </button>
-        <button *ngIf="isLogedIn()" class="btn" (click)="refreshService.executeAll()">
+        <button *ngIf="isLogedIn()" class="btn" (click)="refreshService.executeAll()" [ngStyle]="{ 'visibility': refreshService.isVisible ? 'visible' : 'hidden' }">
           <mat-icon class="turn-360">sync</mat-icon>
         </button>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"