CODEWITHSUNDEEP
ember.js
Chris
Chris

Reputation: 7

How do you have only one menu item open at a time in ember js?

We have a page in ember js which has multiple menus. When you click on an icon the menu should open and when you click on a close button it should close. The only problem is that when you click one and then a second one, they are both open at the same time but what we want is for only one to be open at a time. any suggestions on how to fix this?

{{#if showMenu}}
 <div> Menu items </div>
{{/if}}

showMenu(){
  this.set('showMenu', true);
},
hideMenu(){
  this.set('showMenu', false);
},

Upvotes: 0

Views: 58

Answers (1)

Lux
Lux

Reputation: 18240

IMHO use the eq helper from ember-truth-helpers

then basically this js:

@tracked openMenu = null;
showMenu(name){
  this.openMenu = name;
},
hideMenu(){
  this.openMenu = null;
},

and this hbs:

<button {{on "click" (fn this.showMenu 'menuOne')}}>show one</button>
{{#if (eq this.openMenu "menuOne")}}
  show menu 1
{{/if}}

<button {{on "click" (fn this.showMenu 'menuTwo')}}>show two</button>
{{#if (eq this.openMenu "menuTwo")}}
  show menu 1
{{/if}}

<button {{on "click" this.hideMenu}}>close all</button>

Upvotes: 1

Related Questions