header.component.html

<mat-toolbar class="toolbar-header">
    <span class="logo">
        <button mat-button routerLink="/" class="main-toolbar-button home-button">
            <mat-icon matPrefix svgIcon="dasch_icon_black" class="small"></mat-icon>
            <h1 class="mat-headline desktop-only">DaSCH Service Platform</h1>
            <h1 class="mat-headline phone-tablet-only">DSP</h1>
            <p class="mat-caption right app-version">{{appVersion}}</p>
        </button>
    </span>

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

    <!-- search-panel (in desktop and tablet version) -->
    <span class="action">
        <!-- button to reactivate when dsp-app will be used as a research platform again: -->
        <dsp-search-panel
            [projectfilter]="true"
            [advanced]="true"
            [expert]="true"
            (search)="doSearch($event)">
        </dsp-search-panel>
         <!-- to keep? > advanced and expert search (in desktop and tablet version) > already implemented in dsp-search-panel > we can delete the following commented code -->
         <!-- <span class="other-search-link">
            <button mat-button color="primary" class="advanced-search-link" routerLink="/search/advanced">
                <span>Advanced search</span>
            </button>
            <button mat-button color="primary" class="expert-search-link" routerLink="/search/expert">
                <span>Expert search</span>
            </button>
        </span> -->
    </span>

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

    <!-- button to display search bar (in phone version) -->
    <!-- <button mat-icon-button class="search-link searchbar-phone-screen" (click)="showSearchBar()">
        <mat-icon>search</mat-icon>
    </button> -->

    <!-- action tools: info menu, select language, login button, user menu -->
    <span class="action">

        <button mat-icon-button *ngIf="session" aria-label="Add a new resource" (click)="openNewResourceForm('createResource')" class="main-toolbar-button new-resource" >
            <mat-icon>add_circle_outline</mat-icon>
        </button>

        <button mat-button [routerLink]="'/help'" class="main-toolbar-button help">Help</button>

        <app-select-language></app-select-language>

        <button mat-raised-button color="primary" *ngIf="!session" class="login-button"
            (click)="goToLogin()">LOGIN</button>
        <app-user-menu *ngIf="session"></app-user-menu>
    </span>

</mat-toolbar>

<div *ngIf="showMessage">
    <dsp-message [message]="successMessage" [short]="true" [duration]="2500"></dsp-message>
</div>

<!-- search-panel (in phone version) -->
<!-- div to reactivate when dsp-app will be used as a research platform again: -->
<!-- <div class="search-panel-phone" *ngIf="show">
    <dsp-fulltext-search class="dsp-fulltext-search" (search)="doSearch($event)" [projectfilter]="true">
    </dsp-fulltext-search>
</div> -->