From fb45297bac498de999b219e9ef049e195b773e73 Mon Sep 17 00:00:00 2001
From: Gion-Andri Cantieni <gion-andri@gmx.ch>
Date: Mon, 9 Oct 2023 17:01:11 +0200
Subject: [PATCH] feat: make menu responsive

---
 .../components/footer/footer.component.scss   |  10 +
 .../components/header/header.component.html   |  42 ++--
 .../components/header/header.component.scss   | 180 ++++---------
 src/app/components/header/header.component.ts |  38 ++-
 .../events-list/events-list.component.html    |   2 +
 src/styles.scss                               | 238 +++++++++---------
 src/styles/_menu.scss                         |  72 ++++++
 7 files changed, 304 insertions(+), 278 deletions(-)
 create mode 100644 src/styles/_menu.scss

diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
index 5c9d847..52cf698 100644
--- a/src/app/components/footer/footer.component.scss
+++ b/src/app/components/footer/footer.component.scss
@@ -1,10 +1,20 @@
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+
 :host {
     display: flex;
+    flex-direction: column-reverse;
     justify-content: space-between;
     padding-bottom: 20px;
     padding-top: 20px;
     border-top: 1px solid #BBBFC2;
     align-items: center;
+
+    @include media-breakpoint-up(md) {
+        flex-direction: row;
+
+    }
 }
 
 .links {
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 2c95d51..4644913 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,5 +1,3 @@
-<div class="overlay" (click)="toggleMenu()" [class.active]="isMenuOpen"></div>
-
 <div class="name">
     <a href="/">CHALENDER.CH</a>
 </div>
@@ -12,7 +10,7 @@
 </div>
 <div class="menu">
     <div>
-        <button id="menu-button" [class.opened]="isMenuOpen" (click)="toggleMenu()">
+        <button id="menu-button" [class.opened]="isMenuOpen" (click)="toggleMenu(menu)">
             <svg width="60" height="60" viewBox="0 0 100 100">
                 <path class="line line1"
                       d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"/>
@@ -24,56 +22,56 @@
     </div>
 </div>
 
-
-<div id="main-menu" class="container" [class.active]="isMenuOpen">
-    <div class="content">
+<ng-template #menu let-offcanvas>
+    <div class="menu">
         <ul class="main-menu-top">
-            <li><a (click)="toggleMenu()" [routerLink]="'/'">{{ 'COMPONENTS.HEADER.MAIN_MENU.EVENTS' | translate }}</a>
+            <li><a (click)="toggleMenu(menu)"
+                   [routerLink]="'/'">{{ 'COMPONENTS.HEADER.MAIN_MENU.EVENTS' | translate }}</a>
             </li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/help'">{{ 'COMPONENTS.HEADER.MAIN_MENU.HELP' | translate }}</a></li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/contact'">{{ 'COMPONENTS.HEADER.MAIN_MENU.CONTACT' | translate }}</a></li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/organisation'">{{ 'COMPONENTS.HEADER.MAIN_MENU.ORGANISATION' | translate }}</a></li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/imprint'">{{ 'COMPONENTS.HEADER.MAIN_MENU.IMPRINT' | translate }}</a></li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/privacy'">{{ 'COMPONENTS.HEADER.MAIN_MENU.PRIVACY' | translate }}</a></li>
         </ul>
 
         <ul class="main-menu-bottom" *ngIf="authService.isLoggedIn()">
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/admin/events/new'">{{ 'COMPONENTS.HEADER.PROFILE_MENU.NEW_EVENT' | translate }}</a>
             </li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/admin/events'">{{ 'COMPONENTS.HEADER.PROFILE_MENU.MY_EVENTS' | translate }}</a></li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/admin/subscriptions'">{{ 'COMPONENTS.HEADER.PROFILE_MENU.MY_ABOS' | translate }}</a>
             </li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/admin/profile'">{{ 'COMPONENTS.HEADER.PROFILE_MENU.PROFILE' | translate }}</a></li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/u/logout'">{{ 'COMPONENTS.HEADER.PROFILE_MENU.LOGOUT' | translate }}</a></li>
             <li *ngIf="authService.isModerator() || authService.isAdmin()" class="section-title">
                 <hr>
                 {{ 'COMPONENTS.HEADER.ADMIN.ADMIN' | translate }}
             </li>
             <li *ngIf="authService.isModerator()">
-                <a (click)="toggleMenu()"
+                <a (click)="toggleMenu(menu)"
                    href="/moderator/events">{{ 'COMPONENTS.HEADER.ADMIN.EVENTS' | translate }}</a>
             </li>
             <li *ngIf="authService.isAdmin()">
-                <a (click)="toggleMenu()"
+                <a (click)="toggleMenu(menu)"
                    href="/administrator/users">{{ 'COMPONENTS.HEADER.ADMIN.USERS' | translate }}</a>
             </li>
         </ul>
 
         <ul class="main-menu-bottom" *ngIf="!authService.isLoggedIn()">
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/u/login'">{{ 'COMPONENTS.HEADER.SIGNUP.LOGIN' | translate }}</a></li>
-            <li><a (click)="toggleMenu()"
+            <li><a (click)="toggleMenu(menu)"
                    [routerLink]="'/u/events'">{{ 'COMPONENTS.HEADER.SIGNUP.NEW_EVENT' | translate }}</a></li>
         </ul>
     </div>
-</div>
+</ng-template>
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 816964a..11abd00 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -1,149 +1,67 @@
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+
 :host {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  font-family: CadizBlack, sans-serif;
-  height: 124px;
-  border-bottom: 1px solid #BBBFC2;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-family: CadizBlack, sans-serif;
+    height: 124px;
+    border-bottom: 1px solid #BBBFC2;
 
-  a {
-    color: black;
-    text-decoration: none;
-  }
+    a {
+        color: black;
+        text-decoration: none;
+    }
 }
 
 .name {
-  font-size: 38px;
-  margin-left: 1.5rem;
+    font-size: 19px;
+    margin-left: 1.5rem;
+    @include media-breakpoint-up(sm) {
+        font-size: 38px;
+    }
 }
 
 .short-menu {
-  flex: none;
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: row;
-
-    li {
-      padding: 0.5rem;
+    display: none;
+    flex: none;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+
+        li {
+            padding: 0.5rem;
+        }
     }
-  }
 }
 
 #menu-button {
-  margin-right: 1.5rem;
-  position: relative;
-  z-index: 90;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  padding: 0;
-  width: 60px;
-  height: 60px;
-}
-
-#main-menu {
-  padding: 0;
-  position: absolute;
-  margin: 0 auto;
-  height: 600px;
-  top: -600px;
-  transition: all 200ms ease-in-out;
-  z-index: 60;
-  width: 1280px;
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 2rem;
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-
-    li {
-      padding-bottom: 0.5rem;
-    }
-  }
-
-  ul:nth-of-type(2) {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
-  &.active {
-    top: 0;
-  }
-
-  .content {
-    background-color: var(--accent);
-    gap: 300px;
-    padding: 70px 150px;
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  a {
-    display: inline-block;
+    margin-right: 1.5rem;
     position: relative;
-    color: white;
-  }
-
-  a:after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    transform: scaleX(0);
-    height: 2px;
-    bottom: 0;
-    left: 0;
-    background-color: white;
-    transform-origin: bottom right;
-    transition: transform 0.25s ease-out;
-  }
-
-  a:hover:after {
-    transform: scaleX(1);
-    transform-origin: bottom left;
-  }
-
-  .main-menu-top {
-    font-family: CadizBlack, sans-serif;
-  }
-
-  .main-menu-bottom {
-    font-family: Cadiz, sans-serif;
-  }
-}
-
-.overlay {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background-color: rgba(0, 0, 0, .3);
-  z-index: 50;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 200ms ease-in;
-
-  &.active {
-    opacity: 1;
-    visibility: visible;
-  }
+    z-index: 1046;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    padding: 0;
+    width: 60px;
+    height: 60px;
 }
 
 .section-title {
-  font-size: 14px;
-  color: white;
+    font-size: 14px;
+    color: white;
 
-  hr {
-    border-top: 1px solid white;
-    opacity: 1;
-    margin-bottom: 0;
-  }
+    hr {
+        border-top: 1px solid white;
+        opacity: 1;
+        margin-bottom: 0;
+    }
 }
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index aaf5a0f..f53317a 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -1,18 +1,34 @@
-import {Component} from '@angular/core';
-import {AuthenticationService} from "../../services/authentication.service";
+import { Component, TemplateRef } from '@angular/core';
+import { AuthenticationService } from "../../services/authentication.service";
+import { NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent {
-  public isMenuOpen = false;
+    public isMenuOpen = false;
 
-  constructor(public authService: AuthenticationService) {
-  }
+    constructor(
+        private offcanvasService: NgbOffcanvas,
+        public authService: AuthenticationService,
+    ) {
+    }
 
-  toggleMenu(): void {
-    this.isMenuOpen = !this.isMenuOpen;
-  }
+    toggleMenu(content: TemplateRef<any>): void {
+        this.isMenuOpen = !this.isMenuOpen;
+
+        if (this.isMenuOpen) {
+            const offCanvas = this.offcanvasService.open(content, {
+                position: 'top',
+                panelClass: 'menu-panel',
+            });
+            offCanvas.dismissed.subscribe(() => {
+                this.isMenuOpen = false;
+            });
+        } else {
+            this.offcanvasService.dismiss();
+        }
+    }
 }
diff --git a/src/app/pages/events/events-list/events-list.component.html b/src/app/pages/events/events-list/events-list.component.html
index 7e7030e..90c3051 100644
--- a/src/app/pages/events/events-list/events-list.component.html
+++ b/src/app/pages/events/events-list/events-list.component.html
@@ -66,4 +66,6 @@ <h2>{{cat.formattedDate}}</h2>
     </button>
 </div>
 
+<!--
 <app-new-event-button/>
+-->
diff --git a/src/styles.scss b/src/styles.scss
index 96637a9..6012870 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,182 +1,192 @@
 @import "styles/normalize";
 @import "styles/fonts";
+@import "styles/menu";
 
 
 :root {
-  --accent: #3CBFA4;
+    --accent: #3CBFA4;
 }
 
 /* Importing Bootstrap SCSS file. */
 @import 'bootstrap/scss/bootstrap';
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
 @import "styles/bootstrap-overrides";
 
 body {
-  background-color: #9a9a9a;
-  font-family: Cadiz, sans-serif;
+    background-color: #9a9a9a;
+    font-family: Cadiz, sans-serif;
+    font-size: 16px;
 }
 
 #container {
-  background-color: white;
-  min-height: 100vh;
+    background-color: white;
+    min-height: 100vh;
 }
 
 .container {
-  max-width: 1280px;
-  margin: 0 auto;
+    max-width: 1280px;
+    margin: 0 auto;
 }
 
 #content {
-  min-height: calc(100vh - 124px - 81px - 2rem);
+    //min-height: calc(100vh - 124px - 81px - 2rem);
 }
 
 section.content-narrow {
-  max-width: 800px;
-  margin: 2rem auto;
+    padding: 0 0.5rem;
+
+    @include media-breakpoint-up(lg) {
+        padding: unset;
+        max-width: 900px;
+        margin: 2rem auto;
+    }
 }
 
 section.content-wide {
-  margin: 2rem;
+    margin: 2rem;
 }
 
 h1 {
-  font-family: "CadizBlack", sans-serif;
-  font-size: 2rem;
-  margin-bottom: 1rem;
+    font-family: "CadizBlack", sans-serif;
+    font-size: 2rem;
+    margin-bottom: 1rem;
 }
 
 h2 {
-  font-family: "CadizBlack", sans-serif;
+    font-family: "CadizBlack", sans-serif;
 }
 
 a {
-  color: var(--accent);
-  text-decoration: none;
+    color: var(--accent);
+    text-decoration: none;
 
-  &:hover {
-    text-decoration: underline;
-  }
+    &:hover {
+        text-decoration: underline;
+    }
 }
 
 button.clndr {
-  background-color: white;
-  border: 1px solid black;
-  color: black;
-  padding: 0.5rem 1rem;
-  border-radius: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  margin-right: 2rem;
-
-  &:hover {
-    border: 1px solid var(--accent);
-    color: var(--accent);
-  }
-
-  &:disabled, &.accent:disabled {
-    border: 1px solid grey;
-    color: gray;
     background-color: white;
+    border: 1px solid black;
+    color: black;
+    padding: 0.5rem 1rem;
+    border-radius: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    margin-right: 2rem;
 
     &:hover {
-      border: 1px solid grey;
-      color: gray;
-      background-color: white;
+        border: 1px solid var(--accent);
+        color: var(--accent);
     }
-  }
 
-  &.accent {
-    border: 1px solid var(--accent);
-    color: var(--accent);
+    &:disabled, &.accent:disabled {
+        border: 1px solid grey;
+        color: gray;
+        background-color: white;
 
-    &:hover {
-      background-color: var(--accent);
-      color: white;
+        &:hover {
+            border: 1px solid grey;
+            color: gray;
+            background-color: white;
+        }
     }
-  }
-}
 
-.tag-element {
-  border: 1px solid black;
-  color: black;
-  padding: 3px 8px;
-  margin: 0 8px;
-  // clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
-  position: relative;
+    &.accent {
+        border: 1px solid var(--accent);
+        color: var(--accent);
 
+        &:hover {
+            background-color: var(--accent);
+            color: white;
+        }
+    }
+}
 
-  &.active {
-    border: 1px solid var(--accent);
-    color: var(--accent);
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      border-top: 8px solid var(--accent);
-      border-left: 8px solid white;
-      width: 0;
+.tag-element {
+    border: 1px solid black;
+    color: black;
+    padding: 3px 8px;
+    margin: 0 8px;
+    // clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
+    position: relative;
+
+
+    &.active {
+        border: 1px solid var(--accent);
+        color: var(--accent);
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            border-top: 8px solid var(--accent);
+            border-left: 8px solid white;
+            width: 0;
+        }
     }
-  }
 }
 
 
 #menu-button {
-  .line {
-    fill: none;
-    stroke: black;
-    stroke-width: 6;
-    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
-    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .line1 {
-    stroke-dasharray: 60 207;
-    stroke-width: 6;
-  }
-
-  .line2 {
-    stroke-dasharray: 60 60;
-    stroke-width: 6;
-  }
-
-  .line3 {
-    stroke-dasharray: 60 207;
-    stroke-width: 6;
-  }
-
-  &.opened {
+    .line {
+        fill: none;
+        stroke: black;
+        stroke-width: 6;
+        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
+        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
     .line1 {
-      stroke-dasharray: 90 207;
-      stroke-dashoffset: -134;
-      stroke-width: 6;
-      stroke: white;
+        stroke-dasharray: 60 207;
+        stroke-width: 6;
     }
 
     .line2 {
-      stroke-dasharray: 1 60;
-      stroke-dashoffset: -30;
-      stroke-width: 6;
-      stroke: white;
+        stroke-dasharray: 60 60;
+        stroke-width: 6;
     }
 
     .line3 {
-      stroke-dasharray: 90 207;
-      stroke-dashoffset: -134;
-      stroke-width: 6;
-      stroke: white;
+        stroke-dasharray: 60 207;
+        stroke-width: 6;
+    }
+
+    &.opened {
+        .line1 {
+            stroke-dasharray: 90 207;
+            stroke-dashoffset: -134;
+            stroke-width: 6;
+            stroke: white;
+        }
+
+        .line2 {
+            stroke-dasharray: 1 60;
+            stroke-dashoffset: -30;
+            stroke-width: 6;
+            stroke: white;
+        }
+
+        .line3 {
+            stroke-dasharray: 90 207;
+            stroke-dashoffset: -134;
+            stroke-width: 6;
+            stroke: white;
+        }
     }
-  }
 }
 
 .diff {
-  .added {
-    background-color: #cbffcb;
-  }
+    .added {
+        background-color: #cbffcb;
+    }
 
-  .removed {
-    background-color: #ffbebe;
-  }
+    .removed {
+        background-color: #ffbebe;
+    }
 }
diff --git a/src/styles/_menu.scss b/src/styles/_menu.scss
new file mode 100644
index 0000000..450e7ea
--- /dev/null
+++ b/src/styles/_menu.scss
@@ -0,0 +1,72 @@
+@import 'node_modules/bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/mixins';
+
+
+.offcanvas.menu-panel {
+    height: 100vh !important;
+    background-color: var(--accent);
+
+    @include media-breakpoint-up(md) {
+        height: 600px !important;
+    }
+
+    .menu {
+        overflow-y: scroll;
+        display: flex;
+        flex-direction: column;
+
+        @include media-breakpoint-up(md) {
+            flex-direction: row;
+            inset: 100px;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding-top: 80px;
+            gap: 60px;
+        }
+
+        @include media-breakpoint-up(lg) {
+            gap: 200px;
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 2rem;
+            font-size: 1.5rem;
+            line-height: 2rem;
+            flex-basis: 50%;
+            flex-grow: 1;
+
+            @include media-breakpoint-up(md) {
+                font-size: 2rem;
+                line-height: 2.25rem;
+            }
+
+            @include media-breakpoint-up(lg) {
+                padding: 3rem;
+            }
+
+            li {
+                padding-bottom: 0.5rem;
+            }
+        }
+
+        ul:nth-of-type(2) {
+            font-size: 1.5rem;
+            line-height: 2rem;
+        }
+
+        a {
+            color: white;
+        }
+
+        .main-menu-top {
+            font-family: CadizBlack, sans-serif;
+        }
+
+        .main-menu-bottom {
+            font-family: Cadiz, sans-serif;
+        }
+    }
+}