FEAT #15550 TIME 1:50 adapt the width of right menu according to the device

src/frontend/app/app.component.html

@@ -6,7 +6,7 @@
         <div id="leftContent" style="display: contents;"></div>
       </ion-menu>
       <ion-router-outlet id="main-content"></ion-router-outlet>
-      <ion-menu class="right-menu" #rightMenu menuId="right-menu" contentId="main-content" side="end" type="overlay" disabled (ionDidOpen)="showRightContent=true"
+      <ion-menu [ngClass]="[isPortrait ? 'right-menu' : 'right-menu-responsive']" #rightMenu menuId="right-menu" contentId="main-content" side="end" type="overlay" disabled (ionDidOpen)="showRightContent=true"
       (ionDidClose)="showRightContent=false">
           <div id="rightContent" style="display: contents;"></div>
       </ion-menu>

src/frontend/app/app.component.scss

@@ -10,6 +10,12 @@
     --max-width: 350px%;
 }
 
+.right-menu-responsive {
+  --width: 89%;
+  --min-width: 89%;
+  --max-width: 89%;
+}
+
 .split-pane-ios.split-pane-visible>.left-menu,
 .split-pane-md.split-pane-visible>.left-menu{
   max-width: 350px;

src/frontend/app/app.component.ts

@@ -11,7 +11,7 @@ import { AuthService } from './service/auth.service';
 import { MenuController } from '@ionic/angular';
 import { Router } from '@angular/router';
 import { environment } from '../core/environments/environment';
-
+import { Platform } from '@ionic/angular';
 @Component({
     selector: 'app-root',
     templateUrl: 'app.component.html',
@@ -20,7 +20,8 @@ import { environment } from '../core/environments/environment';
 })
 
 export class AppComponent {
-    debugMode: boolean = false;
+    isPortrait: boolean;
+    debugMode: boolean;
     showLeftContent: boolean = false;
     showRightContent: boolean = false;
     constructor(private translate: TranslateService,
@@ -32,7 +33,8 @@ export class AppComponent {
         public dialog: MatDialog, iconReg: MatIconRegistry,
         public authService: AuthService,
         private menu: MenuController,
-        public router: Router
+        public router: Router,
+        public platform: Platform
     ) {
         iconReg.addSvgIcon('maarchLogo', sanitizer.bypassSecurityTrustResourceUrl('../src/frontend/assets/logo_white.svg'));
 
@@ -46,6 +48,10 @@ export class AppComponent {
         if (!environment.production) {
             this.debugMode = true;
         }
+
+        this.platform.resize.subscribe(async () => {
+                this.isPortrait = this.platform.isPortrait() ? true : false;
+        });
     }
 
     test() {