Finish sidebar navigation

static/src/app/app.component.scss

@@ -7,6 +7,7 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
 }
 
 mat-sidenav {
+  background: #222222;
   top: 50px;
   width: 250px;
 }

static/src/app/app.config.ts

@@ -43,3 +43,7 @@ export const RouteConfig = {
   rankOverviewPath: 'public/ranks',
   decorationOverviewPath: 'public/decorations',
 };
+
+export const ResponsiveConfig = {
+  breakpointPx: 959,
+};

static/src/app/common/navigation/navigation-header.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="primary">
-  <div fxHide.gt-xs>
+  <div fxHide.gt-sm>
     <button mat-icon-button (click)="onToggleSidenav()">
       <mat-icon svgIcon="menu"></mat-icon>
     </button>
@@ -10,7 +10,7 @@
     </a>
     <span class="version-label">v{{version}}</span>
   </div>
-  <div fxHide.xs>
+  <div fxHide.lt-md>
     <ul fxLayout="row" fxLayoutGap="15px" class="navigation-items">
       <li routerLinkActive="active">
         <a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
@@ -91,7 +91,7 @@
       </li>
     </ul>
   </div>
-  <div fxFlex fxLayout fxLayoutAlign="end" fxHide.lt-lg>
+  <div fxFlex fxLayout fxLayoutAlign="end" fxHide.lt-md>
     <ul fxLayout fxLayoutGap="15px" class="navigation-items">
       <li *ngIf="loginService.hasPermission(4)">
         <mat-list-item [matMenuTriggerFor]="menuAdmin">

static/src/app/common/navigation/navigation-header.component.scss

@@ -38,24 +38,22 @@ mat-toolbar {
 .brand-logo {
   padding-top: 6px;
   margin-right: -10px;
-}
 
-.brand-logo mat-icon {
+  mat-icon {
-  color: #dadada;
+    color: #dadada;
-  width: 135px;
+    width: 135px;
-  height: 40px;
+    height: 40px;
-  stroke: #dadada;
+    stroke: #dadada;
-}
+  }
 
-.version-label {
+  .version-label {
-  position: relative;
+    position: relative;
-  left: -42px;
+    left: -42px;
-  font-size: 12px;
+    font-size: 12px;
-  color: #bebebe;
+    color: #bebebe;
-}
+  }
 
-@media all and (max-width: 599px) {
+  @media all and (max-width: 959px) {
-  .brand-logo {
     margin: auto;
   }
 }

static/src/app/common/navigation/navigation-header.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Inject, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import {RouteConfig} from '../../app.config';
 import {environment} from '../../../environments/environment';
 import {LoginService} from '../../services/app-user-service/login-service';
@@ -7,7 +7,6 @@ import {PromotionService} from '../../services/army-management/promotion.service
 import {AwardingService} from '../../services/army-management/awarding.service';
 import {SettingsService} from '../../services/settings.service';
 import {TranslateService} from '@ngx-translate/core';
-import {DOCUMENT} from '@angular/common';
 
 declare function require(url: string);
 
@@ -35,8 +34,7 @@ export class NavigationHeaderComponent implements OnInit {
               private promotionService: PromotionService,
               private awardingService: AwardingService,
               private translate: TranslateService,
-              private settingsService: SettingsService,
+              private settingsService: SettingsService) {
-              @Inject(DOCUMENT) private document) {
   }
 
   ngOnInit() {

static/src/app/common/navigation/sidenav-list.component.html

@@ -1,16 +1,17 @@
 <mat-nav-list>
-  <a mat-list-item routerLink='{{config.overviewPath}}' (click)="onSidenavClose()">
+  <a mat-list-item routerLinkActive="active" routerLink='{{config.overviewPath}}' (click)="onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.overview' | translate}}</span>
   </a>
-  <a mat-list-item [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]"
+  <a mat-list-item routerLinkActive="active" [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]"
     (click)="onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.ranks' | translate}}</span>
   </a>
-  <a mat-list-item [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]"
+  <a mat-list-item
+     routerLinkActive="active" [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]"
     (click)="onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.decorations' | translate}}</span>
   </a>
-  <a mat-list-item routerLink='{{config.statsPath}}' (click)="onSidenavClose()">
+  <a mat-list-item routerLinkActive="active" routerLink='{{config.statsPath}}' (click)="onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.statistics' | translate}}</span>
   </a>
 
@@ -56,9 +57,9 @@
   </mat-menu>
 
   <mat-list-item *ngIf="loginService.hasPermission(2) && loginService.hasSquad()"
+    [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
     [matMenuTriggerFor]="menuRequests">
-    <a [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
+    <a matline>
-      matline>
       <span class="nav-caption">{{'navigation.top.request.manage' | translate}}</span>
       <span class="caret"></span>
     </a>
@@ -74,8 +75,7 @@
     </button>
   </mat-menu>
 
-
+  <mat-divider></mat-divider>
-  <mat-divider style="margin-bottom: 50%;"></mat-divider>
 
   <mat-list-item *ngIf="loginService.hasPermission(4)" [matMenuTriggerFor]="menuAdmin">
     <a matline>
@@ -89,6 +89,24 @@
     </button>
   </mat-menu>
 
+  <mat-list-item *ngIf="features.localization" [matMenuTriggerFor]="menuLanguage">
+    <a class="text-uppercase" matline>
+      <span class="nav-caption">{{language}}</span>
+      <span class="caret"></span>
+    </a>
+  </mat-list-item>
+  <mat-menu #menuLanguage="matMenu">
+    <button mat-menu-item (click)="setLanguage(languages[0])">
+      <mat-icon svgIcon="flag-{{languages[0]}}"></mat-icon>
+      <span class="text-uppercase">{{languages[0]}}</span>
+    </button>
+    <button mat-menu-item (click)="setLanguage(languages[1])">
+      <mat-icon svgIcon="flag-{{languages[1]}}"></mat-icon>
+      <span class="text-uppercase">{{languages[1]}}</span>
+    </button>
+  </mat-menu>
+
+
   <a mat-list-item *ngIf="loginService.isLoggedIn()"
     (click)="logout(); onSidenavClose()">
     <span class="nav-caption">{{'navigation.top.logout' | translate}}</span>

static/src/app/common/navigation/sidenav-list.component.scss

@@ -1,13 +1,50 @@
-a {
+mat-list-item.mat-list-item, a.mat-list-item {
+  font-size: 16px;
   text-decoration: none;
-  color: white;
+  color: #9d9d9d;
-}
 
-a:hover, a:active {
+  &:hover, &.active {
-  color: lightgray;
+    color: #ffffff;
+  }
 }
 
 .nav-caption {
   display: inline-block;
   padding-left: 6px;
 }
+
+mat-divider {
+  margin: 15% 0;
+  border-color: #9d9d9d;
+}
+
+.unprocessed {
+  -webkit-animation-name: color-blink; /* Safari 4.0 - 8.0 */
+  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
+  animation-name: color-blink;
+  animation-duration: 4s;
+  animation-iteration-count: infinite;
+}
+
+.unprocessed-child {
+  background-color: orange;
+}
+
+/* Safari 4.0 - 8.0 */
+@-webkit-keyframes color-blink {
+  from {
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
+}
+
+@keyframes color-blink {
+  from {
+    background-color: #222222;
+  }
+  to {
+    background-color: orange;
+  }
+}

static/src/app/common/navigation/sidenav-list.component.ts

@@ -3,6 +3,10 @@ import {RouteConfig} from '../../app.config';
 import {LoginService} from '../../services/app-user-service/login-service';
 import {PromotionService} from '../../services/army-management/promotion.service';
 import {AwardingService} from '../../services/army-management/awarding.service';
+import {environment} from '../../../environments/environment';
+import {TranslateService} from '@ngx-translate/core';
+import {SettingsService} from '../../services/settings.service';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-sidenav-list',
@@ -13,17 +17,44 @@ export class SidenavListComponent implements OnInit {
 
   @Output() sidenavClose = new EventEmitter();
 
+  readonly features = environment.features;
+
   config = RouteConfig;
 
+  language;
+
+  languages = ['de', 'en'];
+
   constructor(public loginService: LoginService,
+              private router: Router,
               private promotionService: PromotionService,
-              private awardingService: AwardingService) {
+              private awardingService: AwardingService,
+              private translate: TranslateService,
+              private settingsService: SettingsService) {
   }
 
   ngOnInit() {
+    this.settingsService.getLanguage().subscribe((language) => {
+      this.language = language;
+      this.translate.setDefaultLang(language)
+    });
   }
 
   public onSidenavClose = () => {
     this.sidenavClose.emit();
+  };
+
+  setLanguage(language: string) {
+    if (language) {
+      this.language = language;
+      this.settingsService.setLanguage(language);
+    }
+  }
+
+  logout() {
+    this.loginService.logout();
+    setTimeout(() => {
+      this.router.navigate([RouteConfig.overviewPath]);
+    }, 500);
   }
 }

static/src/app/pub/decoration-overview/decoration-overview.component.scss

@@ -7,7 +7,12 @@ h1 {
 
 .decoration-overview-container {
   position: relative;
+  z-index: 0;
   margin: auto 140px 30px;
+
+  @media all and (max-width: 959px) {
+    margin: auto;
+  }
 }
 
 :host /deep/ .mat-tab-header {

static/src/app/statistic/stats.component.html

@@ -12,7 +12,7 @@
     [collapsed]="collapsed"
     [campaign]="selectedCampaign">
   </war-list>
-  <div class="button-container">
+  <div class="button-container" *ngIf="collapseBtnVisible">
     <button mat-icon-button
             class="sidebar-toggle-btn"
             (click)="toggleCollapse()">

static/src/app/statistic/stats.component.ts

@@ -6,6 +6,8 @@ import {TranslateService} from '@ngx-translate/core';
 import {SettingsService} from '../services/settings.service';
 import {WarService} from '../services/logs/war.service';
 import {UIHelpers} from '../utils/global.helpers';
+import {Observable} from 'rxjs';
+import {ResponsiveConfig} from '../app.config';
 
 @Component({
   selector: 'cc-stats',
@@ -20,6 +22,8 @@ export class StatisticComponent implements OnInit {
 
   collapsed = false;
 
+  collapseBtnVisible = true;
+
   constructor(private campaignService: CampaignService,
               private warService: WarService,
               private router: Router,
@@ -31,6 +35,15 @@ export class StatisticComponent implements OnInit {
   }
 
   ngOnInit() {
+    Observable.fromEvent(window, 'resize').subscribe(event => {
+      if (event.target['innerWidth'] <= ResponsiveConfig.breakpointPx) {
+        this.collapsed = true;
+        this.collapseBtnVisible = false;
+      } else {
+        this.collapseBtnVisible = true;
+      }
+    });
+
     this.campaignService.getAllCampaigns()
         .filter(campaigns => campaigns.length !== 0)
         .subscribe((campaigns) => {

static/src/app/statistic/war/war-list/war-item.component.html

@@ -2,7 +2,7 @@
   <div class="war-item-box"
        [matTooltip]="collapsed ? war.title : ''"
        matTooltipPosition="right">
-    <div style="position:relative; z-index:10;">
+    <div style="position:relative;">
       <div class="select-indicator-battle"></div>
     </div>
     <span class="war-title"

static/src/app/statistic/war/war-list/war-list.component.scss

@@ -33,7 +33,6 @@
 .select-indicator-container {
   display: none;
   position: relative;
-  z-index: 10;
 }
 
 .select-indicator {