OpenSlides/client/src/app/shared/components/head-bar/head-bar.component.html

<mat-toolbar color='primary' [ngClass]="{'during-scroll': stickyToolbar}">

    <mat-toolbar-row [ngClass]="{'hidden-bar': stickyToolbar}">
        <!-- Nav menu -->
        <button mat-icon-button *ngIf="vp.isMobile && nav" (click)='clickHamburgerMenu()'>
            <mat-icon>menu</mat-icon>
        </button>
    </mat-toolbar-row>

    <mat-toolbar-row [ngClass]="{'during-scroll': stickyToolbar}">
        <div class="toolbar-left on-transition-fade">
            <!-- Fab Button "Plus" -->
            <button mat-fab class="head-button" *ngIf="plusButton && !editMode" (click)=clickPlusButton()>
                <mat-icon>add</mat-icon>
            </button>

            <!-- Exit / Back button -->
            <button mat-icon-button class="on-transition-fade" *ngIf="backButton && !editMode" (click)="onBackButton()">
                <mat-icon>arrow_back</mat-icon>
            </button>

            <!-- Cancel edit button -->
            <button mat-icon-button class="on-transition-fade" *ngIf="editMode" (click)="toggleEditMode()">
                <mat-icon>close</mat-icon>
            </button>

            <div class="toolbar-left-text">
                <!-- Title slot -->
                <ng-content select=".title-slot"></ng-content>
            </div>
        </div>
        <div class="toolbar-right on-transition-fade" [ngClass]="{'toolbar-right-scroll': stickyToolbar, 'toolbar-right-top': !stickyToolbar}">

            <!-- Extra controls slot -->
            <div class="extra-controls-wrapper on-transition-fade">
                <ng-content select=".extra-controls-slot"></ng-content>
            </div>

            <!-- Save button -->
            <button mat-button *ngIf="editMode" (click)="save()">
                <strong translate class="upper">Save</strong>
            </button>

            <!-- Edit button-->
            <button mat-icon-button *ngIf="!editMode && allowEdit" (click)="toggleEditMode()">
                <mat-icon>{{ editIcon }}</mat-icon>
            </button>

            <!-- Menu button slot -->
            <ng-content *ngIf="!editMode" select=".menu-slot"></ng-content>
        </div>

    </mat-toolbar-row>

</mat-toolbar>

<!-- fake mat-toolbar to keep the distance when the real one gets a fixed position -->
<div class="fake-bar" [ngClass]="{'hidden-bar': !stickyToolbar}"></div>