ngx-admin-lte
Version:
AdminLTE theme for angular
39 lines (38 loc) • 1.25 kB
HTML
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img [src]="currentUser.avatarUrl" class="user-image" [alt]="currentUser.getName()">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">{{currentUser.getName()}}</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img [src]="currentUser.avatarUrl" class="img-circle" [alt]="currentUser.getName()">
<p>
{{currentUser.getName()}} - Web Developer
<small>Member since {{currentUser.creationDate}}</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a (click)="logout()" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>