From d7e07ec275c7062bae5bd413c69fe92048f86e7d Mon Sep 17 00:00:00 2001
From: Lobo <andreas.dahm@gmail.com>
Date: Sat, 6 Dec 2025 09:59:31 +0100
Subject: [PATCH] Added mobile support

If the app is now smaller than x pixels the nav links will be collapsed to a nav menu
---
 src/app/layout/topbar/topbar.component.html | 27 +++++++++++++++++++++
 src/app/layout/topbar/topbar.component.scss | 14 +++++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/app/layout/topbar/topbar.component.html b/src/app/layout/topbar/topbar.component.html
index 8245025..6f8b2ed 100644
--- a/src/app/layout/topbar/topbar.component.html
+++ b/src/app/layout/topbar/topbar.component.html
@@ -16,6 +16,33 @@
     <a routerLink="/projects" mat-button>{{ 'TOPBAR.CONTACT' | translate }}</a>
   </nav>
 
+  <!-- Mobile nav menu button -->
+  <button
+    mat-icon-button
+    class="nav-menu-btn"
+    [matMenuTriggerFor]="navMenu"
+    aria-label="Open navigation">
+    <mat-icon>menu</mat-icon>
+  </button>
+
+  <span class="spacer"></span>
+
+  <!-- Mobile nav menu -->
+  <mat-menu #navMenu="matMenu" xPosition="before">
+    <button mat-menu-item routerLink="/about">
+      {{ 'TOPBAR.ABOUT' | translate }}
+    </button>
+    <button mat-menu-item routerLink="/projects">
+      {{ 'TOPBAR.PROJECTS' | translate }}
+    </button>
+    <button mat-menu-item routerLink="/hobbys">
+      {{ 'TOPBAR.HOBBY' | translate }}
+    </button>
+    <button mat-menu-item routerLink="/contact">
+      {{ 'TOPBAR.CONTACT' | translate }}
+    </button>
+  </mat-menu>
+
   <span class="spacer"></span>
 
   <!-- Settings: Sprache + Theme -->
diff --git a/src/app/layout/topbar/topbar.component.scss b/src/app/layout/topbar/topbar.component.scss
index a148769..c09dea1 100644
--- a/src/app/layout/topbar/topbar.component.scss
+++ b/src/app/layout/topbar/topbar.component.scss
@@ -68,6 +68,16 @@
 }
 
 /* Responsive: Collapse navigation to icon if width is smaller than 760px */
-@media (max-width: 760px) {
-  .topbar .nav { display:none; }
+.nav-menu-btn {
+  display: none;
+}
+
+@media (max-width: 760px) {
+  .topbar .nav {
+    display: none;
+  }
+
+  .nav-menu-btn {
+    display: inline-flex;
+  }
 }