footer.component.html

<div>

  <mat-toolbar class="mat-elevation-z24" id="footer-toolbar">

    <button (click)="showDemo()" aria-labelledby="demo-label" class="focus_button"
            mat-button>
      <mat-icon>flag</mat-icon>
      <span *ngIf="deviceType === 'desktop'">
        {{ 'footer.demo' | translate }}
      </span>
    </button>

    <span class="fill-remaining-space"></span>

    <button [matMenuTriggerFor]="themeMenu" aria-labelledby="style-label"
            class="focus_button" mat-button>
      <mat-icon>accessibility_new</mat-icon>
      <span *ngIf="deviceType === 'desktop'">
          {{'footer.style' | translate}}
        </span>
    </button>

    <span class="fill-remaining-space"></span>
    <button [matMenuTriggerFor]="langMenu" aria-labelledby="language-label" class="focus_button"
            id="language-menu"
            mat-button>
      <mat-icon>language</mat-icon>
      <span *ngIf="deviceType === 'desktop'">
          {{'footer.language' | translate}}
        </span>
    </button>

    <span class="fill-remaining-space"></span>

    <button (click)="showDataProtection()" aria-labelledby="data-protection-label" class="focus_button"
            mat-button>
      <mat-icon>security</mat-icon>
      <span *ngIf="deviceType === 'desktop'">
        {{'footer.dsgvo' | translate}}
      </span>
    </button>

    <span class="fill-remaining-space"></span>

    <button (click)="showImprint()" aria-labelledby="imprint-label" class="focus_button" mat-button>
      <mat-icon>info</mat-icon>
      <span *ngIf="deviceType === 'desktop'">
        {{'footer.imprint' | translate}}
      </span>
    </button>


    <mat-menu #themeMenu="matMenu" [overlapTrigger]="false" cdkTrapFocus class="color-menu">
      <button (click)="changeTheme(theme)" *ngFor="let theme of themes" mat-menu-item style="height:50px;">
        <div class="btnContent">
          <div [ngStyle]="{
'background-color':theme.getPreviewColor()}" class="btnColorIcon">
            <div [ngClass]="{
'checked_true':theme.key===themeClass,
'checked_false':theme.key!==themeClass}" class="checked">
              <mat-icon [ngStyle]="{'color':theme.getOnPreviewColor()}">
                checked
              </mat-icon>
            </div>
          </div>
          <div class="btnAppend">
            <div class="title">
              <p class="title_bold">{{theme.getName(getLanguage())}}</p>
            </div>
            <div class="title">
              <p>{{theme.getDescription(getLanguage())}}</p>
            </div>
          </div>
        </div>
      </button>
    </mat-menu>

    <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
      <button (click)="useLanguage('de')" class="focus_item" mat-menu-item>{{ 'footer.german' | translate }}</button>
      <button (click)="useLanguage('en')" class="focus_item" mat-menu-item>{{ 'footer.english' | translate }}</button>
    </mat-menu>

  </mat-toolbar>
</div>

<div class="visually-hidden">
  <div id="help-label">{{'footer.accessibility-help' | translate}}</div>
  <div id="demo-label">{{'footer.accessibility-demo' | translate}}</div>
  <div id="style-label">{{'footer.accessibility-style' | translate}}</div>
  <div id="language-label">{{'footer.accessibility-language' | translate}}</div>
  <div id="data-protection-label">{{'footer.accessibility-data_protection' | translate}}</div>
  <div id="imprint-label">{{'footer.accessibility-imprint' | translate}}</div>
  <div id="style-default-label">{{'footer.style-default' | translate}}</div>
  <div id="style-dark-label">{{'footer.style-dark' | translate}}</div>
  <div id="style-purple-label">{{'footer.style-purple' | translate}}</div>
  <div id="style-blue-label">{{'footer.style-blue' | translate}}</div>
</div>