From cac62aae2a88f57d6316ed3d5853a3ec270d6306 Mon Sep 17 00:00:00 2001
From: Vikash Prem Sharma <vikashkumarukg977@gmail.com>
Date: Fri, 22 Mar 2024 02:26:28 +0530
Subject: [PATCH] Implemented language selector feature for small screens by
 adding functionality for selecting a language using the language icon

---
 src/app/core/shell/toolbar/toolbar.component.html    |  9 +++++++++
 src/app/core/shell/toolbar/toolbar.component.scss    | 12 ++++++++++++
 .../language-selector.component.html                 |  2 +-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html
index 36bc347ce..2f0f0c5c2 100644
--- a/src/app/core/shell/toolbar/toolbar.component.html
+++ b/src/app/core/shell/toolbar/toolbar.component.html
@@ -54,6 +54,10 @@
     <mifosx-language-selector class="ml-1 language" fxHide.lt-md></mifosx-language-selector>
   </div>
 
+  <button mat-icon-button [matMenuTriggerFor]="languageMenu">
+    <mat-icon class="lg-icon">language</mat-icon>
+  </button>
+
   <div #notifications>
     <mifosx-notifications-tray fxHide.lt-md></mifosx-notifications-tray>
   </div>
@@ -69,6 +73,11 @@
   </div>
 </mat-toolbar>
 
+<!-- Language selector menu for small screen view -->
+<mat-menu #languageMenu="matMenu">
+    <mifosx-language-selector class="ml-1 language"></mifosx-language-selector>
+</mat-menu>
+
 <mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
   <button mat-menu-item routerLink="/clients">{{'labels.menus.Clients' | translate}}</button>
   <button mat-menu-item routerLink="/groups">{{'labels.menus.Groups' | translate}}</button>
diff --git a/src/app/core/shell/toolbar/toolbar.component.scss b/src/app/core/shell/toolbar/toolbar.component.scss
index ce2721ddd..acc7a088e 100644
--- a/src/app/core/shell/toolbar/toolbar.component.scss
+++ b/src/app/core/shell/toolbar/toolbar.component.scss
@@ -38,3 +38,15 @@
     margin-right: 1rem;
   }
 }
+
+// Show icon on small screens
+.lg-icon {
+  display: none;
+}
+
+@media (max-width: 959px) {
+  .lg-icon {
+    display: block; 
+    margin-left: 5px;
+  }
+}
diff --git a/src/app/shared/language-selector/language-selector.component.html b/src/app/shared/language-selector/language-selector.component.html
index 0dc837b05..c48ec00d7 100644
--- a/src/app/shared/language-selector/language-selector.component.html
+++ b/src/app/shared/language-selector/language-selector.component.html
@@ -1,4 +1,4 @@
-<mat-form-field id="language-selector">
+<mat-form-field id="language-selector" class="m-l-10">
   <mat-label>{{'labels.inputs.Language' | translate}}</mat-label>
   <mat-select [formControl]="languageSelector" (selectionChange)="setLanguage()" class="languageselector">
     <mat-option *ngFor="let language of languages" [value]="language">