From 34dde4301432291d4a3e74510140445b0a34e2b6 Mon Sep 17 00:00:00 2001
From: Arne <hello@cptarn.com>
Date: Fri, 4 Aug 2023 11:07:17 +0200
Subject: [PATCH] Added collapse menu

---
 src/app/app.component.scss           |  2 +-
 src/app/header/header.component.html |  5 +++-
 src/app/header/header.component.scss | 36 +++++++++++++++++++++++++++-
 src/app/header/header.component.ts   |  9 ++++++-
 4 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 1766a90..682a570 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -3,7 +3,7 @@
 app-header {
   box-shadow: 0 1.5rem 1rem rgba(0,0,0,0.21);
   position: relative;
-  z-index: 5;
+  z-index: 800;
 }
 
 .hero-container {
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index fa8be93..99ae687 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -6,7 +6,7 @@
   </div>
 </div>
 
-<div class="menu">
+<div class="menu" [ngClass]="{'hidden': !isCollapsed}">
   <a href="#diensten">Diensten<span>Diensten</span></a>
   <a href="#advies">Advies<span>Advies</span></a>
   <a href="#klantworden">Klant worden<span>Klant worden</span></a>
@@ -14,3 +14,6 @@
   <a href="#vacatures">Vacatures<span>Vacatures</span></a>
   <a href="#contact">Contact<span>Contact</span></a>
 </div>
+<div class="icon" (click)="isCollapsed = !isCollapsed">
+  <span class="fa-bars fa-solid"></span>
+</div>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 3d6023c..914bff5 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -61,10 +61,44 @@
 }
 
 @media only screen and (max-width: 1200px)  {
+  :host {
+    padding: 2rem 3rem;
+  }
   .logo .subtext {
     display: none;
   }
+
   .menu {
-    display: none;
+    flex-direction: column;
+    align-items: flex-start;
+    position: absolute;
+    width: 35%;
+    right: 0;
+    top: 11rem;
+    z-index: 200;
+
+    a {
+      width: 100%;
+      background-color: $white;
+      z-index: 200;
+    }
+  }
+
+  .icon {
+    margin-left: auto;
+    margin-right: 0;
+    height: 7.7rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    span {
+      color: $primary-color;
+      font-size: 5rem;
+    }
   }
 }
+
+.hidden {
+  display: none;
+}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 913b282..7424dd1 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 
 @Component({
   selector: 'app-header',
@@ -6,5 +6,12 @@ import { Component } from '@angular/core';
   styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent {
+  public isCollapsed: boolean = false;
 
+  @HostListener('document:click', ['$event'])
+  public reset(event: unknown) {
+    if (!(event as any).srcElement.classList.contains('fa-bars') && !(event as any).ctrlKey && !(event as any).altKey) {
+      this.isCollapsed = false;
+    }
+  }
 }