From dd1e1904f1d723b11299b74397840798bdb9db12 Mon Sep 17 00:00:00 2001
From: Arne Vlaeminck <arne@cptarn.com>
Date: Thu, 31 Oct 2024 21:34:51 +0100
Subject: [PATCH] Added mobile friendly version

---
 src/app/about/about.component.scss         | 23 ++++++++++
 src/app/footer/footer.component.scss       | 18 ++++++++
 src/app/header/header.component.html       |  9 +++-
 src/app/header/header.component.scss       | 49 ++++++++++++++++++++++
 src/app/header/header.component.ts         | 12 +++++-
 src/app/hero/hero.component.scss           | 13 +++++-
 src/app/portfolio/portfolio.component.scss | 22 ++++++++++
 src/app/services/services.component.html   | 40 +++++++++---------
 src/app/services/services.component.scss   | 24 ++++++++++-
 src/styles.scss                            |  2 -
 src/vars.scss                              |  1 +
 11 files changed, 187 insertions(+), 26 deletions(-)
 create mode 100644 src/vars.scss

diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss
index c931145..411465b 100644
--- a/src/app/about/about.component.scss
+++ b/src/app/about/about.component.scss
@@ -1,3 +1,5 @@
+@import "../../vars.scss";
+
 :host {
   padding: 2rem 0;
   display: flex;
@@ -75,3 +77,24 @@
   }
 
 }
+
+@media only screen and (max-width: $small-screen) {
+  .contents {
+    gap: 0;
+    flex-direction: column;
+
+    div {
+      width: 100%;
+    }
+
+    div:last-child {
+      p {
+        display: none;
+      }
+    }
+  }
+
+  .recipe {
+    margin-top: 1rem;
+  }
+}
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index a834136..2553ab4 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -1,3 +1,5 @@
+@import "../../vars.scss";
+
 :host {
   display: flex;
   padding: 2rem 0;
@@ -31,3 +33,19 @@
   font-family: 'Libre Barcode 128 Text';
   font-size: 5rem;
 }
+
+@media only screen and (max-width: $small-screen) {
+  :host {
+    flex-direction: column;
+  }
+  .contact {
+    width: 100%;
+    margin-bottom: 2rem;
+  }
+
+  .barcode {
+    font-size: 3rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 494fe2a..b242806 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,4 +1,11 @@
-<ul>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier" (click)="isCollapsed = !isCollapsed">
+  <path d="M5 6.5H14V8H10V6.5Z"></path>
+  <path d="M5 11.5H16.5V13H7.5V11.5Z"></path>
+  <path d="M5 16.5H19V18H5V16.5Z"></path>
+</g>
+</svg>
+
+<ul class="nav" [ngClass]="{'collapsed': isCollapsed}">
   <li><a href="#services">Aanbod</a></li>
   <li><a href="#portfolio">Portfolio</a></li>
   <li><a href="#about">Over ons</a></li>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 38e84cd..68f3e37 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,3 +1,5 @@
+@import "../../vars.scss";
+
 ul {
   list-style: none;
 
@@ -17,3 +19,50 @@ a {
   text-decoration: none;
   color: var(--text-color);
 }
+
+svg {
+  display: none;
+}
+
+@media only screen and (max-width: $small-screen) {
+  .nav {
+    flex-direction: column;
+    align-items: flex-start;
+    position: absolute;
+    width: fit-content;
+    height: fit-content;
+    top: 5rem;
+    z-index: 200;
+    max-height: 0;
+    transition: max-height 0.5s ease;
+    overflow: hidden;
+    gap: 0;
+
+    &.collapsed {
+      max-height: 10rem;
+      transition: max-height 0.5s ease;
+      overflow: hidden;
+    }
+
+    li {
+      background-color: var(--background-color);
+      z-index: 200;
+      height: 3rem;
+    }
+
+    a {
+      padding: 1rem;
+    }
+  }
+
+  svg {
+    display: inline;
+    height: 4rem;
+    width: 100%;
+    margin: 1rem;
+  }
+
+  path {
+    fill: var(--accent-color);
+  }
+}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index c780cb4..375f401 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,12 +1,20 @@
-import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, HostListener } from '@angular/core';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss'
 })
 export class HeaderComponent {
+  public isCollapsed: boolean = false;
 
+  @HostListener('document:click', ['$event'])
+  public reset(event: unknown) {
+    if ((event as any).srcElement.tagName !== 'path') {
+      this.isCollapsed = false;
+    }
+  }
 }
diff --git a/src/app/hero/hero.component.scss b/src/app/hero/hero.component.scss
index 3869020..e0bcc5d 100644
--- a/src/app/hero/hero.component.scss
+++ b/src/app/hero/hero.component.scss
@@ -1,3 +1,5 @@
+@import "../../vars.scss";
+
 :host {
   flex-direction: column;
   justify-content: center;
@@ -21,10 +23,19 @@ h1 {
 }
 
 .slogan {
-  font-size: 3.5rem;
+  font-size: 3rem;
 }
 
 img {
   height: 5rem;
   margin-bottom: 0.5rem;
 }
+
+@media only screen and (max-width: $small-screen) {
+  h1 {
+    font-size: 2rem;
+  }
+  .slogan {
+    font-size: 1.3rem;
+  }
+}
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss
index 7354b73..d64f9c9 100644
--- a/src/app/portfolio/portfolio.component.scss
+++ b/src/app/portfolio/portfolio.component.scss
@@ -1,3 +1,5 @@
+@import "../../vars.scss";
+
 :host {
   display: flex;
   flex-wrap: wrap;
@@ -29,3 +31,23 @@
 h2 {
   margin: 0;
 }
+
+@media only screen and (max-width: $small-screen) {
+  :host {
+    gap: 0;
+  }
+
+  .left, .right {
+    flex-direction: column-reverse;
+
+    img {
+      max-width: 100%;
+    }
+
+    div {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      width: 100%;
+    }
+  }
+}
diff --git a/src/app/services/services.component.html b/src/app/services/services.component.html
index 126b49a..c5d721e 100644
--- a/src/app/services/services.component.html
+++ b/src/app/services/services.component.html
@@ -1,20 +1,22 @@
-<div class="service">
-  <img src="assets/zetwerk-dark.svg" alt="zetwerk" class="only-on-dark"/>
-  <img src="assets/zetwerk-light.svg" alt="zetwerk" class="only-on-light"/>
-  <h2>Zetwerk van boeken</h2>
-</div>
-<div class="service">
-  <img src="assets/verpakkingen-dark.svg" alt="Verpakkingen" class="only-on-dark" />
-  <img src="assets/verpakkingen-light.svg" alt="Verpakkingen" class="only-on-light" />
-  <h2>Verpakkingen</h2>
-</div>
-<div class="service">
-  <img src="assets/logos-dark.svg" alt="Logos" class="only-on-dark" />
-  <img src="assets/logos-light.svg" alt="Logos" class="only-on-light" />
-  <h2>Logo's en huisstijlen</h2>
-</div>
-<div class="service">
-  <img src="assets/ui-ux-dark.svg" alt="UI/UX" class="only-on-dark" />
-  <img src="assets/ui-ux-light.svg" alt="UI/UX" class="only-on-light" />
-  <h2>UI/UX</h2>
+<div class="wrapper">
+  <div class="service">
+    <img src="assets/zetwerk-dark.svg" alt="zetwerk" class="only-on-dark"/>
+    <img src="assets/zetwerk-light.svg" alt="zetwerk" class="only-on-light"/>
+    <h2>Zetwerk van boeken</h2>
+  </div>
+  <div class="service">
+    <img src="assets/verpakkingen-dark.svg" alt="Verpakkingen" class="only-on-dark" />
+    <img src="assets/verpakkingen-light.svg" alt="Verpakkingen" class="only-on-light" />
+    <h2>Verpakkingen</h2>
+  </div>
+  <div class="service">
+    <img src="assets/logos-dark.svg" alt="Logos" class="only-on-dark" />
+    <img src="assets/logos-light.svg" alt="Logos" class="only-on-light" />
+    <h2>Logo's en huisstijlen</h2>
+  </div>
+  <div class="service">
+    <img src="assets/ui-ux-dark.svg" alt="UI/UX" class="only-on-dark" />
+    <img src="assets/ui-ux-light.svg" alt="UI/UX" class="only-on-light" />
+    <h2>UI/UX</h2>
+  </div>
 </div>
diff --git a/src/app/services/services.component.scss b/src/app/services/services.component.scss
index 17c7a6d..96a733f 100644
--- a/src/app/services/services.component.scss
+++ b/src/app/services/services.component.scss
@@ -1,4 +1,7 @@
-:host {
+@import "../../vars";
+
+.wrapper {
+  display: flex;
   flex-wrap: wrap;
   padding: 2rem 0;
   gap: 2rem;
@@ -20,3 +23,22 @@
     align-self: center;
   }
 }
+
+@media only screen and (max-width: $small-screen) {
+  .wrapper {
+    flex-direction: column;
+    width: fit-content;
+    margin: 0 auto;
+  }
+
+  .service {
+    height: 4rem;
+    width: fit-content;
+    align-self: flex-start;
+
+    img {
+      height: 100%;
+    }
+  }
+
+}
diff --git a/src/styles.scss b/src/styles.scss
index 2ba7787..9384674 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -31,6 +31,4 @@ body {
 
   color: var(--text-color);
   background-color: var(--background-color);
-
-
 }
diff --git a/src/vars.scss b/src/vars.scss
new file mode 100644
index 0000000..44567c6
--- /dev/null
+++ b/src/vars.scss
@@ -0,0 +1 @@
+$small-screen: 50rem;