From 7894d9be41e5b83e94d4d8c830af635b2bbfca5a Mon Sep 17 00:00:00 2001
From: cofrizot <colin.frizot@etu.uca.fr>
Date: Mon, 13 May 2024 15:44:02 +0200
Subject: [PATCH] Fix the mobile menu

---
 src/app/components/header/header.component.html |  8 +++++++-
 src/app/components/header/header.component.scss | 15 +++++++++++++++
 src/app/components/header/header.component.ts   | 13 ++++++-------
 src/styles.scss                                 |  4 ++++
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 4945a31..8411665 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,4 +1,10 @@
 <div class="header" role="banner" [ngClass]="themeClass">
+  <div 
+    class="overlay" 
+    [ngClass]="{visible: isMenuOpen }"
+    (click)="openCloseMenu()"
+  ></div>
+
   <div class="left_part">
     <div class="left_part__logo--container">
       <a routerLink="/" routerLinkActive="active">
@@ -96,7 +102,7 @@
       </div>
     </div>
   </div>
-  <div class="mobile_menu" [ngClass]="{ opened: isMenuOpen }" #menuRef>
+  <div class="mobile_menu" [ngClass]="{opened: isMenuOpen }" #menuRef>
     <div class="mobile_menu--wrapper">
       <div class="mobile_menu--toggles">
         <div class="wrapper">
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 66feb0e..a3b6f4c 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -54,6 +54,21 @@ $theme-transition: all 0.3s ease-in-out;
   justify-content: space-between;
   gap: 2rem;
 
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(black, .2);
+    display: none;
+
+    &.visible {
+      display: block;
+      z-index: 1;
+    }
+  }
+
   .left_part {
     display: flex;
     flex-direction: row;
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 663fb00..626f90d 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -54,14 +54,13 @@ export class HeaderComponent {
 
   openCloseMenu() {
     this.isMenuOpen = !this.isMenuOpen;
-  }
 
-  @HostListener('document:click', ['$event'])
-  clickout(event: MouseEvent) {
-    event.stopPropagation();
-    // If the menu is open and click is outside the menu, we close it
-    if (this.isMenuOpen && !this.menuRef.nativeElement.contains(event.target)) {
-      this.isMenuOpen = false;
+    if(this.isMenuOpen) {
+      // Add an overflow to the body
+      document.body.classList.add('no-scroll')
+    } else {
+      // Remove the overflow of the body
+      document.body.classList.remove('no-scroll')
     }
   }
 }
diff --git a/src/styles.scss b/src/styles.scss
index cc52f59..d8fabd4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -12,4 +12,8 @@ $color-gray: #64748b;
 
 body {
   margin: 0;
+
+  &.no-scroll {
+    overflow: hidden;
+  }
 }