I'm currently working with Angular Material and I have a navigation bar (shown below). I've placed a md-menu inside the nav bar in order to create a dropdown menu on the right side, similar to Bootstrap's navigation bar. How can I relocate the "WELCOME! IVAN" dropdown menu to the right side?
https://i.sstatic.net/eByjK.png
Here is my code snippet:
<div ng-controller="navController">
<md-content>
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-href="#{{ link.url}}" ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}">
<i class="fa {{ link.icon}}" aria-hidden="true"></i>
{{ link.link}}
</md-nav-item>
<md-menu md-offset="0 -7" layout-align="end center">
<md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)">
Welcome! {{ user}}
<!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>-->
<i class="fa fa-user" aria-hidden="true"></i>
</md-button>
<md-menu-content width="3">
<md-menu-item>
<md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-nav-bar>
</md-content>
Appreciate any help you can provide. Thank you! :)