help page

src/app/widget-modules/components/application-frame/navigation/link/link.component.html

@@ -1,4 +1,6 @@
 <a [routerLink]="link" href="#" routerLinkActive="active">
   <fa-icon [icon]="icon"></fa-icon>
-  <span class="link-text">&nbsp;&nbsp;{{ text }}</span></a
->
+  @if(text) {
+    <span class="link-text">&nbsp;&nbsp;{{ text }}</span>
+  }
+</a>

src/app/widget-modules/components/application-frame/navigation/navigation.component.html

@@ -4,7 +4,7 @@
     <app-link *appRole="['user', 'presenter', 'leader']" [icon]="faSongs" link="/songs" text="Lieder"></app-link>
     <app-link *appRole="['leader', 'member']" [icon]="faShows" link="/shows" text="Veranstaltungen"></app-link>
     <app-link *appRole="['presenter']" [icon]="faPresentation" link="/presentation" text="Präsentation"></app-link>
-    <app-link [icon]="faUser" link="/user" text="Benutzer"></app-link>
+
   </div>
   <div *appRole="['user', 'presenter', 'leader']" class="actions actions-search">
     <button
@@ -15,6 +15,8 @@
       (click)="themeService.toggleTheme()">
       <fa-icon [icon]="themeService.isDarkMode() ? faLightMode : faDarkMode"></fa-icon>
     </button>
-    <app-filter></app-filter>
+<!--    <app-filter></app-filter>-->
+    <app-link [icon]="faUser" link="/user"></app-link>
+    <app-link [icon]="faHelp" link="/help"></app-link>
   </div>
 </nav>

src/app/widget-modules/components/application-frame/navigation/navigation.component.less

@@ -32,15 +32,11 @@ nav {
   display: flex;
   height: 100%;
   align-items: center;
-  padding-right: 12px;
 }
 
-.actions-search {
-  gap: var(--gap-s);
-  padding-right: 20px;
-}
 
 .theme-toggle {
+  zoom: 0.8;
   color: var(--text-inverse);
   transition: var(--transition-fast);
 

src/app/widget-modules/components/application-frame/navigation/navigation.component.ts

@@ -1,7 +1,7 @@
 import {Component, inject} from '@angular/core';
 import {MatIconButton} from '@angular/material/button';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {faChalkboard, faMoon, faMusic, faPersonBooth, faSun, faUserCog} from '@fortawesome/free-solid-svg-icons';
+import {faChalkboard, faMoon, faMusic, faPersonBooth, faQuestion, faSun, faUserCog} from '@fortawesome/free-solid-svg-icons';
 import {fromEvent, Observable} from 'rxjs';
 import {distinctUntilChanged, map, shareReplay, startWith} from 'rxjs/operators';
 import {BrandComponent} from './brand/brand.component';
@@ -23,6 +23,7 @@ export class NavigationComponent {
   public faSongs = faMusic;
   public faShows = faPersonBooth;
   public faUser = faUserCog;
+  public faHelp = faQuestion;
   public faPresentation = faChalkboard;
   public faDarkMode = faMoon;
   public faLightMode = faSun;