feat: add header links (#18)

src/app/core/core.module.ts

@@ -4,6 +4,7 @@ import { NavigationBarComponent } from './navigation-bar/navigation-bar.componen
 import { RouterModule } from '@angular/router';
 import { SharedModule } from '@app/shared/shared.module';
 import { FooterComponent } from './footer/footer.component';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 @NgModule({
   declarations: [
@@ -14,6 +15,8 @@ import { FooterComponent } from './footer/footer.component';
     CommonModule,
     RouterModule,
     SharedModule,
+
+    TooltipModule,
   ],
   exports: [
     NavigationBarComponent,

src/app/core/navigation-bar/navigation-bar.component.html

@@ -20,6 +20,19 @@
       <li class="nav-item">
         <a class="nav-link" routerLink="/rules" routerLinkActive="active">rules</a>
       </li>
+
+      <ng-container *ngFor="let link of links">
+        <a [href]="link.target" target="_blank"
+          [ngClass]="link.icon ? 'navbar-brand' : 'nav-link'">
+          <img *ngIf="link.icon; else text"
+            [src]="link.icon"
+            [attr.alt]="link.name"
+            [tooltip]="link.tooltip"
+            width="30" height="30"
+            class="d-inline-block align-top mx-1">
+          <ng-template #text>{{ link.name }}</ng-template>
+        </a>
+      </ng-container>
     </ul>
 
     <div class="navbar-text">

src/app/core/navigation-bar/navigation-bar.component.ts

@@ -3,6 +3,7 @@ import { AuthService } from '@app/auth/auth.service';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/app.state';
 import { profile } from '@app/profile/profile.selectors';
+import { environment } from '@environment';
 
 @Component({
   selector: 'app-navigation-bar',
@@ -14,6 +15,7 @@ export class NavigationBarComponent {
 
   isAuthenticated = this.authService.authenticated;
   profile = this.store.select(profile);
+  links = environment.headerLinks;
 
   constructor(
     private authService: AuthService,

src/environments/environment.ts

@@ -4,14 +4,19 @@
 
 import { version } from 'package.json';
 
+const discordInvitation = 'https://discord.gg/YsAAAz';
+
 export const environment = {
   production: false,
   apiUrl: '/api', // goes via local proxy
   wsUrl: '/',
   version,
+  headerLinks: [
+    { name: 'discord', icon: '/assets/discord.svg', target: discordInvitation, tooltip: 'Join us on discord!' },
+  ],
   footerLinks: [
     { name: 'github', target: 'https://github.com/tf2pickup-pl' },
-    { name: 'discord', target: 'https://discord.gg/YsAAAz' },
+    { name: 'discord', target: discordInvitation },
   ],
 };