From 41975ab3b04317d6e9b684e4a1b5b1d62e4d79e2 Mon Sep 17 00:00:00 2001
From: Syed Mahmood <65136398+Syedmahmood777@users.noreply.github.com>
Date: Fri, 21 Mar 2025 01:59:05 +0530
Subject: [PATCH] fix: WEB-61 Increase clicking hitbox for navigation items
 (#2338)

---
 .../manage-delinquency-buckets.component.html |  32 ++-
 .../manage-tax-configurations.component.html  |  32 ++-
 src/app/products/products.component.html      | 184 +++++++++++---
 .../external-services.component.html          |  64 ++++-
 src/app/system/system.component.html          | 238 ++++++++++++++----
 5 files changed, 449 insertions(+), 101 deletions(-)

diff --git a/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html b/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
index 0f76af0f9..197e19b2f 100644
--- a/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
+++ b/src/app/products/manage-delinquency-buckets/manage-delinquency-buckets.component.html
@@ -3,13 +3,23 @@
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
       <div fxFlex="50%">
         <mat-nav-list>
-          <mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_RANGE'">
+          <mat-list-item [routerLink]="['ranges']" *mifosxHasPermission="'READ_DELINQUENCY_RANGE'">
             <mat-icon matListIcon [routerLink]="['ranges']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['ranges']">{{ 'labels.heading.Manage Delinquency Ranges' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[0]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+              *ngIf="arrowBooleans[0]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['ranges']">
               {{ 'labels.text.Define delinquency day ranges' | translate }}
             </p>
@@ -19,13 +29,23 @@
 
       <div fxFlex="50%">
         <mat-nav-list>
-          <mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
+          <mat-list-item [routerLink]="['buckets']" *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
             <mat-icon matListIcon [routerLink]="['buckets']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['buckets']">{{ 'labels.heading.Manage Delinquency Buckets' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[1]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+              *ngIf="arrowBooleans[1]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['buckets']">
               {{ 'labels.text.Define delinquency bucket as set of ranges' | translate }}
             </p>
diff --git a/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html b/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
index 383d4d01a..81701a9a5 100644
--- a/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
+++ b/src/app/products/manage-tax-configurations/manage-tax-configurations.component.html
@@ -3,13 +3,23 @@
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
       <div fxFlex="50%">
         <mat-nav-list>
-          <mat-list-item *mifosxHasPermission="'READ_TAXCOMPONENT'">
+          <mat-list-item [routerLink]="['tax-components']" *mifosxHasPermission="'READ_TAXCOMPONENT'">
             <mat-icon matListIcon [routerLink]="['tax-components']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['tax-components']">{{ 'labels.heading.Manage Tax Components' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[0]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+              *ngIf="arrowBooleans[0]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['tax-components']">
               {{ 'labels.heading.Define Tax Components' | translate }}
             </p>
@@ -19,13 +29,23 @@
 
       <div fxFlex="50%">
         <mat-nav-list>
-          <mat-list-item *mifosxHasPermission="'READ_TAXGROUP'">
+          <mat-list-item [routerLink]="['tax-groups']" *mifosxHasPermission="'READ_TAXGROUP'">
             <mat-icon matListIcon [routerLink]="['tax-groups']">
               <fa-icon icon="building" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['tax-groups']">{{ 'labels.heading.Manage Tax Groups' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[1]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+              *ngIf="arrowBooleans[1]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['tax-groups']">
               {{ 'labels.heading.Define Tax Groups' | translate }}
             </p>
diff --git a/src/app/products/products.component.html b/src/app/products/products.component.html
index 19c37886e..475909f22 100644
--- a/src/app/products/products.component.html
+++ b/src/app/products/products.component.html
@@ -4,13 +4,25 @@
       <div fxFlex="50%">
         <mat-nav-list>
           <div #loanProducts>
-            <mat-list-item *mifosxHasPermission="'READ_LOANPRODUCT'">
+            <mat-list-item [routerLink]="['loan-products']" *mifosxHasPermission="'READ_LOANPRODUCT'">
               <mat-icon matListIcon [routerLink]="['loan-products']">
                 <fa-icon icon="briefcase" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['loan-products']">{{ 'labels.heading.Loan Products' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[0]"
+                style="z-index: 1000"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+                *ngIf="arrowBooleans[0]"
+                style="z-index: 1000"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['loan-products']">
                 {{ 'labels.text.Add new loan product or modify or inactivate loan product' | translate }}
               </p>
@@ -18,13 +30,23 @@
           </div>
 
           <div #savingsProducts>
-            <mat-list-item *mifosxHasPermission="'READ_SAVINGSPRODUCT'">
+            <mat-list-item [routerLink]="['saving-products']" *mifosxHasPermission="'READ_SAVINGSPRODUCT'">
               <mat-icon matListIcon [routerLink]="['saving-products']">
                 <fa-icon icon="briefcase" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['saving-products']">{{ 'labels.heading.Savings Products' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[1]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+                *ngIf="arrowBooleans[1]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['saving-products']">
                 {{ 'labels.text.Add new savings product or modify or inactivate savings product' | translate }}
               </p>
@@ -32,13 +54,23 @@
           </div>
 
           <div #shareProducts>
-            <mat-list-item *mifosxHasPermission="'READ_SHAREPRODUCT'">
+            <mat-list-item [routerLink]="['share-products']" *mifosxHasPermission="'READ_SHAREPRODUCT'">
               <mat-icon matListIcon [routerLink]="['share-products']">
                 <fa-icon icon="briefcase" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['share-products']">{{ 'labels.heading.Share Products' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(2); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[2]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(2); $event.stopPropagation()"
+                *ngIf="arrowBooleans[2]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['share-products']">
                 {{ 'labels.text.Add new share product or modify or inactivate share product' | translate }}
               </p>
@@ -46,40 +78,73 @@
           </div>
 
           <div #charges>
-            <mat-list-item *mifosxHasPermission="'READ_CHARGE'">
+            <mat-list-item [routerLink]="['charges']" *mifosxHasPermission="'READ_CHARGE'">
               <mat-icon matListIcon [routerLink]="['charges']">
                 <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['charges']">{{ 'labels.heading.Charges' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(3); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[3]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(3); $event.stopPropagation()"
+                *ngIf="arrowBooleans[3]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['charges']">
                 {{ 'labels.text.Define charges/penalties for loan products, savings and deposit products' | translate }}
               </p>
             </mat-list-item>
           </div>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['collaterals']">
             <mat-icon matListIcon [routerLink]="['collaterals']">
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['collaterals']">{{ 'labels.heading.Collateral Management' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(4); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[4]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(4); $event.stopPropagation()"
+              *ngIf="arrowBooleans[4]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['collaterals']">
               {{ 'labels.text.Define collaterals for Collateral Management' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'">
+          <mat-list-item
+            [routerLink]="['delinquency-bucket-configurations']"
+            *mifosxHasPermission="'READ_DELINQUENCY_BUCKET'"
+          >
             <mat-icon matListIcon [routerLink]="['delinquency-bucket-configurations']">
               <fa-icon icon="briefcase" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['delinquency-bucket-configurations']">
               {{ 'labels.heading.Delinquency Buckets' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(5); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[5]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(5); $event.stopPropagation()"
+              *ngIf="arrowBooleans[5]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['delinquency-bucket-configurations']">
               {{ 'labels.text.Define delinquency day ranges and bucket set for loan products' | translate }}
             </p>
@@ -89,28 +154,48 @@
 
       <div fxFlex="50%">
         <mat-nav-list>
-          <mat-list-item *mifosxHasPermission="'READ_PRODUCTMIX'">
+          <mat-list-item [routerLink]="['products-mix']" *mifosxHasPermission="'READ_PRODUCTMIX'">
             <mat-icon matListIcon [routerLink]="['products-mix']">
               <fa-icon icon="random" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['products-mix']">{{ 'labels.heading.Products Mix' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(6); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[6]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(6); $event.stopPropagation()"
+              *ngIf="arrowBooleans[6]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['products-mix']">
               {{ 'labels.text.Defines rules for taking multiple rules' | translate }}
             </p>
           </mat-list-item>
 
           <div #fixedDepositProducts>
-            <mat-list-item *mifosxHasPermission="'READ_FIXEDDEPOSITPRODUCT'">
+            <mat-list-item [routerLink]="['fixed-deposit-products']" *mifosxHasPermission="'READ_FIXEDDEPOSITPRODUCT'">
               <mat-icon matListIcon [routerLink]="['fixed-deposit-products']">
                 <fa-icon icon="briefcase" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['fixed-deposit-products']">
                 {{ 'labels.heading.Fixed Deposit Products' | translate }}
               </h4>
-              <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(7); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[7]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(7); $event.stopPropagation()"
+                *ngIf="arrowBooleans[7]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['fixed-deposit-products']">
                 {{ 'labels.text.Add, modify or inactivate a Fixed deposit product' | translate }}
               </p>
@@ -118,42 +203,75 @@
           </div>
 
           <div #recurringDepositProducts>
-            <mat-list-item *mifosxHasPermission="'READ_RECURRINGDEPOSITPRODUCT'">
+            <mat-list-item
+              [routerLink]="['recurring-deposit-products']"
+              *mifosxHasPermission="'READ_RECURRINGDEPOSITPRODUCT'"
+            >
               <mat-icon matListIcon [routerLink]="['recurring-deposit-products']">
                 <fa-icon icon="briefcase" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['recurring-deposit-products']">
                 {{ 'labels.heading.Recurring Deposit Products' | translate }}
               </h4>
-              <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(8); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[8]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(8); $event.stopPropagation()"
+                *ngIf="arrowBooleans[8]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['recurring-deposit-products']">
                 {{ 'labels.text.Add, modify or inactivate a Recurring Deposit product' | translate }}
               </p>
             </mat-list-item>
           </div>
 
-          <mat-list-item *mifosxHasPermission="'READ_TAXGROUP'">
+          <mat-list-item [routerLink]="['tax-configurations']" *mifosxHasPermission="'READ_TAXGROUP'">
             <mat-icon matListIcon [routerLink]="['tax-configurations']">
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['tax-configurations']">
               {{ 'labels.heading.Manage Tax Configurations' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(9); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[9]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(9); $event.stopPropagation()"
+              *ngIf="arrowBooleans[9]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['tax-configurations']">
               {{ 'labels.text.Define Tax components and Tax groups' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item *mifosxHasPermission="'READ_FLOATINGRATE'">
+          <mat-list-item [routerLink]="['floating-rates']" *mifosxHasPermission="'READ_FLOATINGRATE'">
             <mat-icon matListIcon [routerLink]="['floating-rates']">
               <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['floating-rates']">{{ 'labels.heading.Floating Rates' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="!arrowBooleans[10]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="arrowBooleans[10]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(10); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[10]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(10); $event.stopPropagation()"
+              *ngIf="arrowBooleans[10]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['floating-rates']">
               {{ 'labels.text.Define floating rates for loan products' | translate }}
             </p>
diff --git a/src/app/system/external-services/external-services.component.html b/src/app/system/external-services/external-services.component.html
index 8da934d7a..0616f2c7a 100644
--- a/src/app/system/external-services/external-services.component.html
+++ b/src/app/system/external-services/external-services.component.html
@@ -3,25 +3,45 @@
     <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px">
       <div fxFlex="50%">
         <mat-nav-list>
-          <mat-list-item>
+          <mat-list-item [routerLink]="['amazon-s3']">
             <mat-icon matListIcon [routerLink]="['amazon-s3']">
               <fa-icon icon="cloud" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['amazon-s3']">{{ 'labels.heading.S3 Amazon External Service' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[0]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+              *ngIf="arrowBooleans[0]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine [routerLink]="['amazon-s3']" *ngIf="arrowBooleans[0]">
               {{ 'labels.text.S3 Amazon Service Configuration' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['sms']">
             <mat-icon matListIcon [routerLink]="['sms']">
               <fa-icon icon="comment-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['sms']">{{ 'labels.heading.SMS External Service' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[1]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+              *ngIf="arrowBooleans[1]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine [routerLink]="['sms']" *ngIf="arrowBooleans[1]">
               {{ 'labels.text.SMS Service Configuration' | translate }}
             </p>
@@ -31,27 +51,47 @@
 
       <div fxFlex="50%">
         <mat-nav-list>
-          <mat-list-item>
+          <mat-list-item [routerLink]="['email']">
             <mat-icon matListIcon [routerLink]="['email']">
               <fa-icon icon="envelope" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['email']">{{ 'labels.heading.Email External Service' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(2); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[2]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(2); $event.stopPropagation()"
+              *ngIf="arrowBooleans[2]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine [routerLink]="['email']" *ngIf="arrowBooleans[2]">
               {{ 'labels.text.Email Service Configuration' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['notification']">
             <mat-icon matListIcon [routerLink]="['notification']">
               <fa-icon icon="bell" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['notification']">
               {{ 'labels.heading.Notification External Service' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(3); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[3]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(3); $event.stopPropagation()"
+              *ngIf="arrowBooleans[3]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine [routerLink]="['notification']" *ngIf="arrowBooleans[3]">
               {{ 'labels.text.Notification Service Configuration' | translate }}
             </p>
diff --git a/src/app/system/system.component.html b/src/app/system/system.component.html
index 99f2e69bb..f32c37f37 100644
--- a/src/app/system/system.component.html
+++ b/src/app/system/system.component.html
@@ -4,13 +4,23 @@
       <div fxFlex="50%">
         <mat-nav-list>
           <div #datatables>
-            <mat-list-item>
+            <mat-list-item [routerLink]="['data-tables']">
               <mat-icon matListIcon [routerLink]="['data-tables']">
                 <fa-icon icon="table" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['data-tables']">{{ 'labels.heading.Manage Data tables' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="!arrowBooleans[0]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(0)" *ngIf="arrowBooleans[0]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[0]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(0); $event.stopPropagation()"
+                *ngIf="arrowBooleans[0]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[0]" [routerLink]="['data-tables']">
                 {{ 'labels.text.Add new extra fields to any entity' | translate }}
               </p>
@@ -18,13 +28,23 @@
           </div>
 
           <div #codes>
-            <mat-list-item>
+            <mat-list-item matListIcon [routerLink]="['codes']">
               <mat-icon matListIcon [routerLink]="['codes']">
                 <fa-icon icon="list-ul" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['codes']">{{ 'labels.heading.Manage Codes' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="!arrowBooleans[1]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(1)" *ngIf="arrowBooleans[1]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[1]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(1); $event.stopPropagation()"
+                *ngIf="arrowBooleans[1]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[1]" [routerLink]="['codes']">
                 {{ 'labels.text.Codes are used to define drop down values' | translate }}
               </p>
@@ -32,15 +52,25 @@
           </div>
 
           <div #rolesandpermission>
-            <mat-list-item>
+            <mat-list-item [routerLink]="['roles-and-permissions']">
               <mat-icon matListIcon [routerLink]="['roles-and-permissions']">
                 <fa-icon icon="key" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['roles-and-permissions']">
                 {{ 'labels.heading.Manage Roles and Permissions' | translate }}
               </h4>
-              <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="!arrowBooleans[2]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(2)" *ngIf="arrowBooleans[2]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(2); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[2]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(2); $event.stopPropagation()"
+                *ngIf="arrowBooleans[2]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[2]" [routerLink]="['roles-and-permissions']">
                 {{ 'labels.text.Define or modify roles and associated permissions' | translate }}
               </p>
@@ -48,68 +78,118 @@
           </div>
 
           <div #makerCheckerTable>
-            <mat-list-item>
+            <mat-list-item [routerLink]="['configure-mc-tasks']">
               <mat-icon matListIcon [routerLink]="['configure-mc-tasks']">
                 <fa-icon icon="sitemap" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['configure-mc-tasks']">
                 {{ 'labels.heading.Configure Maker Checker Tasks' | translate }}
               </h4>
-              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="!arrowBooleans[3]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(3)" *ngIf="arrowBooleans[3]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(3); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[3]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(3); $event.stopPropagation()"
+                *ngIf="arrowBooleans[3]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[3]" [routerLink]="['configure-mc-tasks']">
                 {{ 'labels.text.Define or modify Maker Checker tasks' | translate }}
               </p>
             </mat-list-item>
           </div>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['hooks']">
             <mat-icon matListIcon [routerLink]="['hooks']">
               <fa-icon icon="anchor" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['hooks']">{{ 'labels.heading.Manage Hooks' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="!arrowBooleans[4]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(4)" *ngIf="arrowBooleans[4]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(4); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[4]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(4); $event.stopPropagation()"
+              *ngIf="arrowBooleans[4]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[4]" [routerLink]="['hooks']">
               {{ 'labels.text.Define Hooks' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['entity-to-entity-mapping']">
             <mat-icon matListIcon [routerLink]="['entity-to-entity-mapping']">
               <fa-icon icon="road" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['entity-to-entity-mapping']">
               {{ 'labels.heading.Entity to Entity Mapping' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="!arrowBooleans[5]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(5)" *ngIf="arrowBooleans[5]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(5); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[5]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(5); $event.stopPropagation()"
+              *ngIf="arrowBooleans[5]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[5]" [routerLink]="['entity-to-entity-mapping']">
               {{ 'labels.text.Define or modify entity to entity mappings' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['surveys']">
             <mat-icon matListIcon [routerLink]="['surveys']">
               <fa-icon icon="file-alt" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['surveys']">{{ 'labels.heading.Manage Surveys' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="!arrowBooleans[6]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(6)" *ngIf="arrowBooleans[6]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(6); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[6]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(6); $event.stopPropagation()"
+              *ngIf="arrowBooleans[6]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[6]" [routerLink]="['surveys']">
               {{ 'labels.text.Manage your Services' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item *mifosxHasPermission="'READ_EXTERNAL_EVENT_CONFIGURATION'">
+          <mat-list-item [routerLink]="['external-events']" *mifosxHasPermission="'READ_EXTERNAL_EVENT_CONFIGURATION'">
             <mat-icon matListIcon [routerLink]="['external-events']">
               <fa-icon icon="anchor" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['external-events']">
               {{ 'labels.heading.Manage External Events' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="!arrowBooleans[7]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(7)" *ngIf="arrowBooleans[7]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(7); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[7]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(7); $event.stopPropagation()"
+              *ngIf="arrowBooleans[7]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[7]" [routerLink]="['external-events']">
               {{ 'labels.text.External Events configuration, to enable or disable' | translate }}
             </p>
@@ -119,77 +199,137 @@
 
       <div fxFlex="50%">
         <mat-nav-list>
-          <mat-list-item>
+          <mat-list-item [routerLink]="['audit-trails']">
             <mat-icon matListIcon [routerLink]="['audit-trails']">
               <fa-icon icon="money-check" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['audit-trails']">{{ 'labels.heading.Audit Trails' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="!arrowBooleans[8]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(8)" *ngIf="arrowBooleans[8]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(8); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[8]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(8); $event.stopPropagation()"
+              *ngIf="arrowBooleans[8]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[8]" [routerLink]="['audit-trails']">
               {{ 'labels.text.Audit logs of all the activities' | translate }}
             </p>
           </mat-list-item>
 
           <div #manageReports>
-            <mat-list-item>
+            <mat-list-item [routerLink]="['reports']">
               <mat-icon matListIcon [routerLink]="['reports']">
                 <fa-icon icon="file-word" size="sm"></fa-icon>
               </mat-icon>
               <h4 matLine [routerLink]="['reports']">{{ 'labels.heading.Manage Reports' | translate }}</h4>
-              <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="!arrowBooleans[9]" icon="arrow-down" size="md"></fa-icon>
-              <fa-icon (click)="arrowBooleansToggle(9)" *ngIf="arrowBooleans[9]" icon="arrow-up" size="md"></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(9); $event.stopPropagation()"
+                *ngIf="!arrowBooleans[9]"
+                icon="arrow-down"
+                size="md"
+              ></fa-icon>
+              <fa-icon
+                (click)="arrowBooleansToggle(9); $event.stopPropagation()"
+                *ngIf="arrowBooleans[9]"
+                icon="arrow-up"
+                size="md"
+              ></fa-icon>
               <p matLine *ngIf="arrowBooleans[9]" [routerLink]="['reports']">
                 {{ 'labels.text.Add new report and classify reports' | translate }}
               </p>
             </mat-list-item>
           </div>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['manage-jobs']">
             <mat-icon matListIcon [routerLink]="['manage-jobs']">
               <fa-icon icon="clock" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['manage-jobs']">{{ 'labels.heading.Manage Jobs' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="!arrowBooleans[10]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(10)" *ngIf="arrowBooleans[10]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(10); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[10]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(10); $event.stopPropagation()"
+              *ngIf="arrowBooleans[10]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[10]" [routerLink]="['manage-jobs']">
               {{ 'labels.text.Manage Schedule and Workflow jobs, modify jobs' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['configurations']">
             <mat-icon matListIcon [routerLink]="['configurations']">
               <fa-icon icon="cogs" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['configurations']">{{ 'labels.heading.Configurations' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="!arrowBooleans[11]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(11)" *ngIf="arrowBooleans[11]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(11); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[11]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(11); $event.stopPropagation()"
+              *ngIf="arrowBooleans[11]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[11]" [routerLink]="['configurations']">
               {{ 'labels.text.Global configurations, Cache and Business Date' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['account-number-preferences']">
             <mat-icon matListIcon [routerLink]="['account-number-preferences']">
               <fa-icon icon="key" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['account-number-preferences']">
               {{ 'labels.heading.Account Number Preferences' | translate }}
             </h4>
-            <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="!arrowBooleans[12]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(12)" *ngIf="arrowBooleans[12]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(12); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[12]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(12); $event.stopPropagation()"
+              *ngIf="arrowBooleans[12]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[12]" [routerLink]="['account-number-preferences']">
               {{ 'labels.text.Preferences for generating account numbers for client' | translate }}
             </p>
           </mat-list-item>
 
-          <mat-list-item>
+          <mat-list-item [routerLink]="['external-services']">
             <mat-icon matListIcon [routerLink]="['external-services']">
               <fa-icon icon="cog" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine [routerLink]="['external-services']">{{ 'labels.heading.External Services' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="!arrowBooleans[13]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(13)" *ngIf="arrowBooleans[13]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(13); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[13]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(13); $event.stopPropagation()"
+              *ngIf="arrowBooleans[13]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[13]" [routerLink]="['external-services']">
               {{ 'labels.text.External Services Configuration' | translate }}
             </p>
@@ -200,8 +340,18 @@
               <fa-icon icon="key" size="sm"></fa-icon>
             </mat-icon>
             <h4 matLine>{{ 'labels.heading.Two-Factor Configuration' | translate }}</h4>
-            <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="!arrowBooleans[14]" icon="arrow-down" size="md"></fa-icon>
-            <fa-icon (click)="arrowBooleansToggle(14)" *ngIf="arrowBooleans[14]" icon="arrow-up" size="md"></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(14); $event.stopPropagation()"
+              *ngIf="!arrowBooleans[14]"
+              icon="arrow-down"
+              size="md"
+            ></fa-icon>
+            <fa-icon
+              (click)="arrowBooleansToggle(14); $event.stopPropagation()"
+              *ngIf="arrowBooleans[14]"
+              icon="arrow-up"
+              size="md"
+            ></fa-icon>
             <p matLine *ngIf="arrowBooleans[14]">
               {{ 'labels.text.Two-factor authentication configuration' | translate }}
             </p>