CODEWITHSUNDEEP
angularjsangular-material
nesterenes
nesterenes

Reputation: 232

Angular Material MenuBar with arrow toggle doesn't toggle correctly

I'm using Angular Material MenuBar and attempting to add an arrow toggle, so that when the menu is open the arrow is up, and toggles down when closed.

I'm able to use ng-show to trigger it when clicked. However if the user clicks out changing focus, closing the menu (without re-clicking the menu) the arrow is now in the wrong state and does not toggle back.

I also tried ng-blur which did not work the way I had hoped.

I think I need to watch the close event on the menu, but I'm not sure the best way to do that with md-menu-bar. Any suggestions on the best way to implement this toggle arrow?

  <md-menu-bar id="user-menu">
    <md-menu md-position-mode="left bottom">
      <md-button class="user-button" ng-click="$mdOpenMenu($event); model.UserMenuOpen = !model.UserMenuOpen;" aria-label="User Settings">
          <span class="username" hide-xs ng-if="profile">{{profile.firstName}} {{profile.lastName}}</span>

          <md-icon md-font-icon="icon-chevron-down" class="icon s16" ng-show="model.UserMenuOpen"></md-icon>
          <md-icon md-font-icon="icon-chevron-up" class="icon s16" ng-show="!model.UserMenuOpen"></md-icon>          
        </div>
      </md-button>

      <md-menu-content>
        <md-menu-item>
          <md-icon md-font-icon="icon-cart-outline" class="icon"></md-icon>
          <md-button>Cart</md-button>
        </md-menu-item>
        <md-menu-item>
          <md-icon md-font-icon="icon-account" class="icon"></md-icon>
          <md-button>Profile</md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>
  </md-menu-bar>

Upvotes: 1

Views: 2539

Answers (1)

nesterenes
nesterenes

Reputation: 232

Solved via CSS using the md-open class.

#user-menu .arrow-up
{
  display: none; 
}

#user-menu md-menu .arrow-down
{
  display: inline; 
}

#user-menu md-menu.md-open .arrow-up
{
  display: inline; 
}

#user-menu md-menu.md-open .arrow-down
{
  display: none; 
}

Upvotes: 1

Related Questions