<div class="profile" [ngClass]="{'profile-expanded':active}" *ngIf="domainMember$ | async as domainMember">
    <a href="#" (click)="onClick($event)">
        <img class="profile-image" src="assets/layout/images/avatar.png" />
        <span class="profile-name">{{domainMember.member.name}}</span>
        <i class="material-icons">keyboard_arrow_down</i>
    </a>
</div>

<ul class="ultima-menu profile-menu" [@menu]="active ? 'visible' : 'hidden'">
    <li role="menuitem">
        <a [routerLink]="['/account/profile']" class="ripplelink" [attr.tabindex]="!active ? '-1' : null">
            <i class="material-icons">person</i>
            <span>Profile</span>
        </a>
    </li>
    <li role="menuitem">
        <a href="#" class="ripplelink" [attr.tabindex]="!active ? '-1' : null">
            <i class="material-icons">security</i>
            <span>Privacy</span>
        </a>
    </li>
    <li role="menuitem">
        <a [routerLink]="['/account/settings']" class="ripplelink" [attr.tabindex]="!active ? '-1' : null">
            <i class="material-icons">settings_application</i>
            <span>Settings</span>
        </a>
    </li>
    <li role="menuitem">
        <a href="#" class="ripplelink" [attr.tabindex]="!active ? '-1' : null">
            <i class="material-icons">power_settings_new</i>
            <span>Logout</span>
        </a>
    </li>
</ul>
