<div class="header" fxLayout="row" fxLayoutAlign="space-between center" fxHide fxShow.gt-sm>
    <span class="logo"><img src="../../../../../public/images/knoks-logo.png" height="52" alt="logo"/></span>
    <div fxFlex="550px" fxLayout="row" fxLayoutAlign="space-around" fxFlexAlign="center start">
        <span *ngFor="let item of menuItems; first as isFirst">
            <a *ngIf="!(item.rout.startsWith('https')||item.rout.startsWith('http'))"  routerLink="{{'[lang]'|translate: {url: item.rout} }}" [ngClass]="{'active' : item.isActive}" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">{{item.translateKey|translate}}</a>
            <a *ngIf="(item.rout.startsWith('https')||item.rout.startsWith('http'))"  href="{{'[lang]'|translate: {url: item.rout} }}" target="_blank" [ngClass]="{'active' : item.isActive}">{{item.translateKey|translate}}</a>
        </span>
    </div>
    <span class="action" fxFlexAlign="center" *ngIf="!isLogin"><a mat-line routerLink="{{'[lang]'|translate: {url: 'login'} }}">{{'[menu.signin]'|translate}}</a></span>
    <div fxLayout="row" *ngIf="isLogin" fxLayoutAlign="end center">
        <span [style.cursor]='"pointer"' [matMenuTriggerFor]="user">{{'[menu.my account]'|translate}}</span>
        <span class="separator">|</span>
        <a mat-line routerLink="{{'[lang]'|translate: {url: 'login'} }}" (click)="logout()">{{'[menu.signout]'|translate}}</a>
    </div>
</div>
<div class="header-xs" fxLayout="row" fxLayoutAlign="space-between center" fxHide fxShow.lt-md>
    <i class="material-icons" (click)="openSideNav()">menu</i>
    <img src="../../../../../public/images/knoks-logo.png" alt="logo" height="22"/>
    <i class="material-icons">person_outline</i>
</div>

<mat-menu #user="matMenu" xPosition="before">
    <div class="userinfo">
        {{ accounts?.user.firstName+' '+accounts?.user.lastName }}
    </div>
    <hr>
    <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'myaccount'} }}" routerLinkActive="active">
        My Profile
    </button>
</mat-menu>
