chore: fix open/close tab in mobile

src/layouts/fourCorners/fourCorners.component.ts

-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 
 @Component({
   selector: 'iav-layout-fourcorners',
@@ -8,4 +8,7 @@ import { Component } from "@angular/core";
   ]
 })
 
-export class FourCornersCmp{}
\ No newline at end of file
+export class FourCornersCmp{
+  @Input('iav-layout-fourcorners-cnr-cntr-ngclass')
+  cornerContainerClasses = {}
+}

src/layouts/fourCorners/fourCorners.template.html

@@ -2,15 +2,19 @@
   <ng-content select="[iavLayoutFourCornersContent]"></ng-content>
 </div>
 
-<div class="corner-container position-absolute top-0 left-0">
+<div [ngClass]="cornerContainerClasses"
+  class="corner-container position-absolute top-0 left-0">
   <ng-content select="[iavLayoutFourCornersTopLeft]"></ng-content>  
 </div>
-<div class="corner-container position-absolute top-0 right-0">
+<div [ngClass]="cornerContainerClasses"
+  class="corner-container position-absolute top-0 right-0">
   <ng-content select="[iavLayoutFourCornersTopRight]"></ng-content>  
 </div>
-<div class="corner-container position-absolute bottom-0 left-0">
+<div [ngClass]="cornerContainerClasses"
+  class="corner-container position-absolute bottom-0 left-0">
   <ng-content select="[iavLayoutFourCornersBottomLeft]"></ng-content>  
 </div>
-<div class="corner-container position-absolute bottom-0 right-0">
+<div [ngClass]="cornerContainerClasses"
+  class="corner-container position-absolute bottom-0 right-0">
   <ng-content select="[iavLayoutFourCornersBottomRight]"></ng-content>  
 </div>
\ No newline at end of file

src/ui/topMenu/topMenuCmp/topMenu.template.html

 <ng-template [ngIf]="ismobile" [ngIfElse]="fullTmpl">
   <div iav-fab-speed-dial-container
-    #fab="iavFabSpeedDialContainer">
+    #fab="iavFabSpeedDialContainer"
+    class="d-flex flex-column align-items-center">
     <button mat-fab
       iav-fab-speed-dial-trigger
       [color]="fab.isOpen ? 'basic' : 'accent'">

src/viewerModule/viewerCmp/viewerCmp.template.html

@@ -55,42 +55,49 @@
 
     <mat-drawer-content class="visible position-relative pe-none">
       
-      <iav-layout-fourcorners>
+      <iav-layout-fourcorners [iav-layout-fourcorners-cnr-cntr-ngclass]="{'w-100': true}">
 
         <!-- pullable tab top right corner -->
-        <div iavLayoutFourCornersTopLeft class="d-inline-flex">
-
-          <div *ngIf="viewerLoaded"
-            class="pe-all tab-toggle-container"
-            (click)="sideNavTopSwitch && sideNavTopSwitch.toggle()">
-            <ng-container *ngTemplateOutlet="tabTmpl; context: {
-              isOpen: sideNavTopSwitch.switchState,
-              regionSelected: selectedRegions$ | async,
-              iavAdditionallayers: iavAdditionalLayers$ | async
-            }">
-            </ng-container>
+        <div iavLayoutFourCornersTopLeft class="d-flex flex-nowrap w-100">
+
+          <!-- top left -->
+          <div class="flex-grow-1 d-flex flex-nowrap">
+
+            <div *ngIf="viewerLoaded"
+              class="pe-all tab-toggle-container"
+              (click)="sideNavTopSwitch && sideNavTopSwitch.toggle()">
+              <ng-container *ngTemplateOutlet="tabTmpl; context: {
+                isOpen: sideNavTopSwitch.switchState,
+                regionSelected: selectedRegions$ | async,
+                iavAdditionallayers: iavAdditionalLayers$ | async
+              }">
+              </ng-container>
+            </div>
+
+            <iav-cmp-viewer-nehuba-status *ngIf="viewerLoaded"
+              class="pe-all mt-2 muted-7">
+            </iav-cmp-viewer-nehuba-status>
           </div>
 
-          <iav-cmp-viewer-nehuba-status *ngIf="viewerLoaded"
-            class="pe-all mt-2 muted-7">
-          </iav-cmp-viewer-nehuba-status>
-        </div>
+          <!-- top right -->
+          <div class="flex-grow-0 d-inline-flex align-items-start">
 
-        <!-- signin banner at top right corner -->
-        <div iavLayoutFourCornersTopRight
-          class="d-inline-flex align-items-start">
+            <!-- signin banner at top right corner -->
+            
 
-          <top-menu-cmp class="mt-3 mr-2 d-inline-block"
-            [ismobile]="ismobile"
-            [viewerLoaded]="viewerLoaded">
-          </top-menu-cmp>
+            <top-menu-cmp class="mt-3 mr-2 d-inline-block"
+              [ismobile]="ismobile"
+              [viewerLoaded]="viewerLoaded">
+            </top-menu-cmp>
 
-          <div *ngIf="viewerLoaded"
-            class="iv-custom-comp bg card m-2 mat-elevation-z2">
-            <atlas-dropdown-selector class="pe-all mt-2">
-            </atlas-dropdown-selector>
+            <div *ngIf="viewerLoaded"
+              class="iv-custom-comp bg card m-2 mat-elevation-z2">
+              <atlas-dropdown-selector class="pe-all mt-2">
+              </atlas-dropdown-selector>
+            </div>
           </div>
         </div>
+
       </iav-layout-fourcorners>
 
     </mat-drawer-content>