<section layout="row">
    <div hide-xs hide-sm ng-show="vm.displayUserInfo" class="tb-user-info" layout="row">
        <md-icon aria-label="{{ 'home.avatar' | translate }}" class="material-icons tb-mini-avatar">account_circle</md-icon>
        <div layout="column">
            <span class="tb-user-display-name">{{vm.userDisplayName()}}</span>
            <span class="tb-user-authority">{{vm.authorityName()}}</span>
        </div>
    </div>
    <md-menu md-position-mode="target-right target">
        <md-button class="md-icon-button"  aria-label="{{ 'home.open-user-menu' | translate }}" ng-click="$mdOpenMenu($event)">
            <md-icon md-menu-origin aria-label="{{ 'home.open-user-menu' | translate }}" class="material-icons">more_vert</md-icon>
        </md-button>
        <md-menu-content width="4">
            <md-menu-item>
                <md-button ng-click="vm.openProfile()">
                    <md-icon md-menu-align-target aria-label="{{ 'home.profile' | translate }}" class="material-icons">account_circle</md-icon>
                    <span translate>home.profile</span>
                </md-button>
            </md-menu-item>
            <md-menu-item>
                <md-button ng-click="vm.logout()">
                    <md-icon md-menu-align-target aria-label="{{ 'home.logout' | translate }}" class="material-icons">exit_to_app</md-icon>
                    <span translate>home.logout</span>
                </md-button>
            </md-menu-item>
        </md-menu-content>
    </md-menu>
</section>