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

@@ -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>

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;
+  }
+}

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">