fix qcca theme

package.json

@@ -67,6 +67,7 @@
     "@igo2/geo": "1.15.4",
     "@igo2/integration": "1.15.4",
     "@igo2/utils": "1.15.4",
+    "bootstrap": "^5.3.1",
     "core-js": "^3.24.1",
     "hammerjs": "^2.0.8",
     "rxjs": "^7.5.6",
@@ -104,4 +105,4 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.1.0"
   }
-}
+}

src/app/app.component.html

@@ -2,6 +2,6 @@
 
 <app-header *ngIf="hasHeader" #header></app-header>
 
-<app-menu *ngIf="hasMenu" class="flex flex-col h-100 overflow-y-hidden"></app-menu>
+<app-menu *ngIf="hasMenu" class="flex flex-col flex-1"></app-menu>
 
 <app-portal *ngIf="!hasMenu" [ngClass]="hasHeader? 'portal-hasHeader': 'portal'"></app-portal>

src/app/app.component.scss

@@ -8,6 +8,7 @@ $footer-height: 29px;
 :host {
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
   height: 100%;
 
   igo-message-center

src/app/pages/header/header.component.html

@@ -1,21 +1,40 @@
-<mat-toolbar class = banner role = banner color="primary">
-	<div class="container">
-		<div class="row">
-			<div class="col-6 col-md-10 flex flex-wrap align-items-center zone-logo-title">
-				<a class="logo" tabindex="5" routerLink="">
-                    <img id="header-logo" alt="Logo" src="{{headerLogo}}">
-
-                </a>
-				<img id="header-logo-print" alt="Logo" src="{{headerLogoPrint}}" width="199" height="60" />
-				<p lang="fr" id="title-desktop" class="zone-title  d-none d-md-block">{{'header.title' | translate}}</p>
-			</div>
-			<div class="col-6 col-md-2 flex justify-content-end zone-links">
-				<ul class="nav flex-col">
-					<!--<li><button class="buttonLanguage" disabled (click)="changeLanguage()">{{'header.language'}}</button></li>-->
-					<li><a rel="noopener noreferrer" alt="('header.contactUsUrl' | translate)" href="{{'header.contactUsUrl' | translate}}" target="_blank">{{'header.contactUs' | translate}}</a></li>
-				</ul>
-			</div>
-			<p lang="fr" id="title-mobile" class="zone-title d-md-none col-12"><a>{{'header.title' | translate}}</a></p>
-		</div>
-	</div>
-</mat-toolbar>
+<header>
+  <div class="banner" role="banner" color="primary">
+    <div class="container">
+      <div class="row">
+        <div class="col-6 col-md-10 flex flex-wrap align-items-center">
+          <a class="logo" tabindex="5" routerLink="">
+            <img id="header-logo" alt="Logo" src="{{ headerLogo }}" />
+          </a>
+          <img
+            id="header-logo-print"
+            alt="Logo"
+            src="{{ headerLogoPrint }}"
+            width="199"
+            height="60"
+          />
+          <p lang="fr" id="title-desktop" class="zone-title d-none d-md-block">
+            {{ 'header.title' | translate }}
+          </p>
+        </div>
+        <div class="col-6 col-md-2 flex justify-content-end zone-links">
+          <ul class="nav flex-col">
+            <!--<li><button class="buttonLanguage" disabled (click)="changeLanguage()">{{'header.language'}}</button></li>-->
+            <li>
+              <a
+                rel="noopener noreferrer"
+                alt="('header.contactUsUrl' | translate)"
+                href="{{ 'header.contactUsUrl' | translate }}"
+                target="_blank"
+                >{{ 'header.contactUs' | translate }}</a
+              >
+            </li>
+          </ul>
+        </div>
+        <p lang="fr" id="title-mobile" class="zone-title d-md-none col-12">
+          <a>{{ 'header.title' | translate }}</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</header>