Merge branch 'develop' of ssh://gitlab.zakscode.com:2224/zakscode/LegioXXX into develop

 Conflicts:

	src/app/app.routing.ts

src/app/components/logo/logo.component.html

@@ -0,0 +1,9 @@
+<div class="logo">
+	<div class="d-flex" aria-label="Legio XXX">
+		<div>L</div>
+		<div [@slide]="expand ? 'expand' : 'shrink'" style="overflow: hidden">EGIO · </div>
+		<div [@margin]="expand ? 'expand' : 'shrink'" [style.marginLeft]="expand ? '0.25rem' : 0">XXX</div>
+		<div *ngIf="loading">{{dots | async}}</div>
+	</div>
+    <div *ngIf="loadingText" class="logo-footer text-center">{{loadingText}}</div>
+</div>

src/app/components/logo/logo.component.scss

@@ -0,0 +1,26 @@
+//.logo {
+//  .expandable {
+//    width: 0;
+//  }
+//
+//  &.expanded {
+//    .expandable {
+//      width: auto;
+//    }
+//  }
+//
+//  .logo-segment {
+//    font-family: Arial, sans-serif !important;
+//    overflow: hidden;
+//    padding: 0.3em 0;
+//    width: auto;
+//  }
+//
+//  .logo-dots {
+//    width: 30px;
+//  }
+//
+//  .logo-footer {
+//    transform: translate(-15px, -8px);
+//  }
+//}

src/app/components/logo/logo.component.ts

@@ -0,0 +1,35 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {Observable, timer} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Component({
+	selector: 'xxx-logo',
+	templateUrl: './logo.component.html',
+	animations: [
+		trigger('slide', [
+			state('expand', style({width: '*'})),
+			state('shrink', style({width: '0px'})),
+			transition('* => *', [animate('0.5s')])
+		]),
+		trigger('margin', [
+			state('expand', style({marginLeft: '0.25rem'})),
+			state('shrink', style({marginLeft: '0'})),
+			transition('* => *', [animate('0.5s')])
+		])
+	],
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LogoComponent {
+	@Input() expand = true;
+	@Input() loading = false;
+	@Input() loadingText = '';
+
+	dots: Observable<string>;
+
+	constructor() {
+		this.dots = timer(0, 1000).pipe(map(i => {
+			return Array(i % 4).fill('.').join('');
+		}));
+	}
+}

src/app/components/navbar/navbar.component.html

@@ -3,7 +3,7 @@
 		<div>
 			<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner" (click)="scroll('banner')">
 				<img src="assets/img/eagle.png" alt="SPQR" height="45px" width="45px">
-				<div class="px-2">LEGIO · XXX</div>
+				<xxx-logo class="px-2" [expand]="true"></xxx-logo>
 			</a>
 		</div>
 		<div class="flex-grow-1"></div>

src/app/components/navbar/navbar.component.ts

@@ -2,6 +2,7 @@ import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {combineLatest, filter, Subscription} from 'rxjs';
 import {NAVIGATION} from '../../misc/navigation';
+import {BreakpointService} from '../../services/breakpoint.service';
 
 @Component({
 	selector: 'xxx-navbar',
@@ -20,7 +21,7 @@ export class NavbarComponent implements AfterViewInit, OnDestroy {
 
 	@Output() hamburgerClick = new EventEmitter<void>();
 
-	constructor(private route: ActivatedRoute, private router: Router) { }
+	constructor(private route: ActivatedRoute, private router: Router, public breakpoint: BreakpointService) { }
 
 	ngAfterViewInit() {
 		this.sub = combineLatest([this.router.events.pipe(filter(e => e instanceof NavigationEnd)), this.route.fragment]).subscribe(([url, frag]) => {