From f7522c103653112749a34cb1905419b659d9fd66 Mon Sep 17 00:00:00 2001
From: Gion-Andri Cantieni <gion-andri@gmx.ch>
Date: Thu, 11 Jan 2024 15:38:03 +0100
Subject: [PATCH] feat: show short menu

---
 .../components/header/header.component.html   | 12 ++++++++--
 .../components/header/header.component.scss   | 12 ++++++++++
 src/app/components/header/header.component.ts | 22 +++++++++++++++++++
 src/assets/i18n/rm.json                       |  2 +-
 4 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 4d463b1..d313fdc 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -5,8 +5,16 @@
 
     <div class="short-menu">
         <ul>
-            <li><a href="/">{{ 'COMPONENTS.HEADER.SUB_MENU.EVENTS' | translate }}</a></li>
-            <li><a href="#">{{ 'COMPONENTS.HEADER.SUB_MENU.NOTICE_BOARD' | translate }}</a></li>
+            <li>
+                <a [routerLink]="'/'" [class.active]="isLinkActive('/')">
+                    {{ 'COMPONENTS.HEADER.SUB_MENU.EVENTS' | translate }}
+                </a>
+            </li>
+            <li>
+                <a [routerLink]="'/notices'" [class.active]="isLinkActive('/notices')">
+                    {{ 'COMPONENTS.HEADER.SUB_MENU.NOTICE_BOARD' | translate }}
+                </a>
+            </li>
         </ul>
     </div>
     <div class="menu">
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 71f7d4e..8ed7556 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -35,6 +35,14 @@
     display: none;
     flex: none;
 
+    @include media-breakpoint-up(md) {
+        display: flex;
+    }
+
+    @include media-breakpoint-up(lg) {
+        font-size: 22px;
+    }
+
     ul {
         list-style: none;
         margin: 0;
@@ -44,6 +52,10 @@
 
         li {
             padding: 0.5rem;
+
+            a.active {
+                text-decoration: underline;
+            }
         }
     }
 }
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index f4416fb..a7da578 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -3,6 +3,7 @@ import { NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
 import { AuthenticationService } from '../../shared/services/authentication.service';
 import { IframeService } from '../../services/iframe.service';
 import { Subscription } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-header',
@@ -19,6 +20,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
         private offcanvasService: NgbOffcanvas,
         public authService: AuthenticationService,
         private iframeService: IframeService,
+        private router: Router
     ) {
     }
 
@@ -49,4 +51,24 @@ export class HeaderComponent implements OnInit, OnDestroy {
             this.offcanvasService.dismiss();
         }
     }
+
+    isLinkActive(url: string): boolean {
+        // hack needed, as native routerLinkActive 
+        const queryParamsIndex = this.router.url.indexOf('?');
+        let baseUrl = queryParamsIndex === -1 ? this.router.url : this.router.url.slice(0, queryParamsIndex);
+        if (baseUrl === url) {
+            return true;
+        }
+
+        const lastIndex = baseUrl.lastIndexOf('/');
+        const base = baseUrl.substring(0, lastIndex);
+        const ending = baseUrl.substring(lastIndex + 1);
+
+        // empty string is removed
+        if (url === "/" && base === "" && ending.length === 24) {
+            return true;
+        }
+
+        return (base === url && ending.length === 24);
+    }
 }
diff --git a/src/assets/i18n/rm.json b/src/assets/i18n/rm.json
index d358e44..814d376 100644
--- a/src/assets/i18n/rm.json
+++ b/src/assets/i18n/rm.json
@@ -40,7 +40,7 @@
         },
         "HEADER": {
             "SUB_MENU": {
-                "EVENTS": "occurrenzas",
+                "EVENTS": "chalender",
                 "NOTICE_BOARD": "tavla naira"
             },
             "MAIN_MENU": {