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

@@ -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 -->

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) {
+.nav-menu-btn {
-  .topbar .nav { display:none; }
+  display: none;
+}
+
+@media (max-width: 760px) {
+  .topbar .nav {
+    display: none;
+  }
+
+  .nav-menu-btn {
+    display: inline-flex;
+  }
 }