update navigation + profile

2021-09-23 13:53:08 +02:00
parent 53ac145165
commit 1c0be5e1ea
25 changed files with 469 additions and 204 deletions
@@ -0,0 +1,86 @@
+<mat-toolbar color="primary">
+  <a href="javascript:" mat-icon-button>
+    <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
+  </a>
+  <mat-icon svgIcon="logo"></mat-icon>
+  <span>
+    we.bstly
+  </span>
+  <span class="spacer"></span>
+  <ng-container>
+
+    <button mat-button [matMenuTriggerFor]="menu">
+      <mat-icon>settings</mat-icon>
+      <mat-icon>arrow_drop_down</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-menu-item>
+        <mat-icon>login</mat-icon> {{'login' | i18n}}
+      </a>
+      <mat-divider *ngIf="!auth || auth && !auth.authenticated"></mat-divider>
+      <a *ngFor="let locale of locales" mat-menu-item (click)="setLocale(locale)">{{'locale.' + locale + '.long' |
+        i18n}} <mat-icon inline=true *ngIf="locale == currentLocale">done</mat-icon></a>
+      <a mat-menu-item>
+        <mat-slide-toggle (change)="darkThemeChange($event)" [checked]="darkTheme  == 'true'">
+          {{'profileField.name.darkTheme' | i18n}}
+        </mat-slide-toggle>
+      </a>
+      <mat-divider *ngIf="auth && auth.authenticated"></mat-divider>
+      <a *ngIf="auth && auth.authenticated" (click)="logout()" mat-menu-item>
+        <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
+      </a>
+    </mat-menu>
+  </ng-container>
+</mat-toolbar>
+
+<mat-sidenav-container>
+  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened"
+    (click)="!isBiggerScreen() && opened=false">
+    <mat-nav-list>
+      <a *ngIf="!auth || auth && !auth.authenticated" routerLink="/login" routerLinkActive="active" mat-list-item>
+        <mat-icon>login</mat-icon> {{'login' | i18n}}
+      </a>
+      <a *ngIf="auth && auth.authenticated" routerLink="/account/info" routerLinkActive="active" mat-list-item>
+        <mat-icon>account_circle</mat-icon> {{'account' | i18n}}
+      </a>
+      <a *ngIf="auth && auth.authenticated" routerLink="/services" routerLinkActive="active" mat-list-item>
+        <mat-icon>widgets</mat-icon> {{'services' | i18n}}
+      </a>
+      <a routerLink="/tokens" mat-list-item>
+        <mat-icon>card_giftcard</mat-icon> {{'tokens.redeem' | i18n}}
+      </a>
+      <a (click)="openExternal('https://wiki.bstly.de/services/webstly','_blank')" mat-list-item>
+        <mat-icon>help</mat-icon> {{'help' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
+        </mat-icon>
+      </a>
+      <a (click)="openExternal('https://membership.bstly.de','_blank')" mat-list-item>
+        <mat-icon>shopping_cart</mat-icon> {{'tokens.get' | i18n}}<mat-icon style="font-size: 1em;">open_in_new
+        </mat-icon>
+      </a>
+      <a *ngIf="auth && auth.authenticated" (click)="logout()" mat-list-item>
+        <mat-icon>exit_to_app</mat-icon> {{'logout' | i18n}}
+      </a>
+    </mat-nav-list>
+
+    <span class="spacer"></span>
+
+    <mat-nav-list>
+      <a (click)="openExternal('https://www.bstly.de/imprint/')" mat-list-item style="font-size: 0.7em;">
+        {{'imprint' | i18n}}
+      </a>
+      <a (click)="openExternal('https://www.bstly.de/privacy-policy/#we.bstly')" mat-list-item style="font-size: 0.7em;">
+        {{'privacy-policy' | i18n}}
+      </a>
+      <a (click)="openExternal('https://www.bstly.de')" mat-list-item style="font-size: 0.7em;">
+        Bastelei e. V.
+      </a>
+    </mat-nav-list>
+  </mat-sidenav>
+
+  <!-- Main content -->
+  <mat-sidenav-content>
+    <div class="container">
+      <router-outlet></router-outlet>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>