From 80ba112bc0040cc687930b0d61f90b3c129ead54 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 26 Jul 2021 21:06:10 +0200
Subject: [PATCH] Feature/change menu icon if menu open (#231)

* Change menu icon

* Update changelog
---
 CHANGELOG.md                                             | 1 +
 .../src/app/components/header/header.component.html      | 4 +++-
 .../client/src/app/components/header/header.component.ts | 9 +++++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2cc36e298..91fe594a3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Introduced tabs on the home page
+- Changed the menu icon if the menu is open on mobile
 
 ## 1.28.0 - 24.07.2021
 
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 9d566f7de..71e61464f 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -106,6 +106,8 @@
       class="no-min-width px-1"
       mat-flat-button
       [matMenuTriggerFor]="accountMenu"
+      (menuClosed)="onMenuClosed()"
+      (menuOpened)="onMenuOpened()"
     >
       <ion-icon
         class="d-none d-sm-block"
@@ -114,8 +116,8 @@
       ></ion-icon>
       <ion-icon
         class="d-block d-sm-none"
-        name="menu-outline"
         size="large"
+        [name]="isMenuOpen ? 'close-outline' : 'menu-outline'"
       ></ion-icon>
     </button>
     <mat-menu #accountMenu="matMenu" xPosition="before">
diff --git a/apps/client/src/app/components/header/header.component.ts b/apps/client/src/app/components/header/header.component.ts
index a1e1d09bf..8d8923b22 100644
--- a/apps/client/src/app/components/header/header.component.ts
+++ b/apps/client/src/app/components/header/header.component.ts
@@ -38,6 +38,7 @@ export class HeaderComponent implements OnChanges {
   public hasPermissionForSubscription: boolean;
   public hasPermissionToAccessAdminControl: boolean;
   public impersonationId: string;
+  public isMenuOpen: boolean;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -84,6 +85,14 @@ export class HeaderComponent implements OnChanges {
     window.location.reload();
   }
 
+  public onMenuClosed() {
+    this.isMenuOpen = false;
+  }
+
+  public onMenuOpened() {
+    this.isMenuOpen = true;
+  }
+
   public onSignOut() {
     this.signOut.next();
   }