<div class="header" fxLayout="row" fxLayoutAlign="space-between center" fxHide fxShow.gt-sm>
    <span class="logo"><!--img src="" height="52" alt=""--></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="{{item.rout}}" [ngClass]="{'active' : item.isActive}" (click)="setActiveMenu(item)">{{item.translateKey|translate}}</a>
            <a *ngIf="(item.rout.startsWith('https')||item.rout.startsWith('http'))" href="{{item.rout}}" target="_blank" [ngClass]="{'active' : item.isActive}" (click)="setActiveMenu(item)">{{item.translateKey|translate}}</a>
        </span>
    </div>
    <span class="action" fxFlexAlign="center" *ngIf="!isLogin"><a md-line routerLink="en/login">{{'[menu.signin]'|translate}}</a></span>
    <div fxLayout="row" *ngIf="isLogin" fxLayoutAlign="end center">
        <span [style.cursor]='"pointer"' [mdMenuTriggerFor]="user">{{'[menu.my account]'|translate}}</span>
        <span class="separator">|</span>
        <a md-line routerLink="en/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="" alt="logo" height="22"-->
    <i class="material-icons">person_outline</i>
</div>

<md-menu #user="mdMenu" xPosition="before">
    <div class="userinfo">
        {{ accounts?.user.firstName+' '+accounts?.user.lastName }}
    </div>
    <hr>
    <button md-menu-item [routerLink]="['/',lang,'myaccount']">
        My Profile
    </button>
</md-menu>
