Nested dropdown

components.dropdown-list-item.js

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({

  mouseEnter() {
    this.setActiveItems(this);
  },

  mouseLeave() {
    this.clearActiveItems();
  },

  isActive: computed('activeItems.[]', function() {
    return this.activeItems.objectAt(0) === this;
  })

});

components.dropdown-list.js

import Component from '@ember/component';
import { task, timeout } from 'ember-concurrency';
import { isEmpty } from '@ember/utils';

export default Component.extend({

  init() {
    this._super(...arguments);
    this.set('activeItems', []);
  },

  setActiveItems(...path) {
    this.updateActiveItems.perform(path);
  },

  clearActiveItems() {
    this.updateActiveItems.perform([]);
  },

  updateActiveItems: task(function*(path) {
    if (isEmpty(path)) {
      yield timeout(1000);
    }

    this.set('activeItems', path);
  }).restartable()

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

ul {
  width: 400px;
}

li {
  background: #DAE1E7;
  display: block;
  width: 400px;
  padding: 10px;
  cursor: pointer;
}
.active {
  background: #FFED4A;
}

templates.application.hbs

{{#modal-dialog}}
  <DropdownList as |List|>
    <h1>List</h1>
    <ul>
      <List.item as |Item|>
        <li class={{if Item.isActive 'active'}}>
          Item 1

          {{#if Item.isActive}}
            <Item.sublist as |List|>
              {{#modal-dialog}}
                <h1>Sublist</h1>
                <ul>
                  <List.item as |Item|>
                    <li class={{if Item.isActive 'active'}}>
                      Subitem 1
                    </li>
                  </List.item>

                  <List.item as |Item|>
                    <li class={{if Item.isActive 'active'}}>
                      Subitem 2
                    </li>

                    {{#if Item.isActive}}
                      {{#modal-dialog}}
                        <h1>Sub-sublist</h1>
                        <Item.sublist as |List|>
                          <ul>
                            <List.item as |Item|>
                              <li class={{if Item.isActive 'active'}}>
                                Sub-subitem 1
                              </li>
                            </List.item>
                            <List.item as |Item|>
                              <li class={{if Item.isActive 'active'}}>
                                Sub-subitem 2
                              </li>
                            </List.item>
                          </ul>
                        </Item.sublist>
                      {{/modal-dialog}}
                    {{/if}}
                  </List.item>
                </ul>
              {{/modal-dialog}}
            </Item.sublist>
          {{/if}}
        </li>
      </List.item>
      <List.item as |Item|>
        <li class={{if Item.isActive 'active'}}>
          Item 2
        </li>
      </List.item>
      <List.item as |Item|>
        <li class={{if Item.isActive 'active'}}>
          Item 3
        </li>
      </List.item>
    </ul>
  </DropdownList>
{{/modal-dialog}}

templates.components.dropdown-list-item.hbs

{{yield (hash
  isActive=isActive
  sublist=(component 'dropdown-list'
    setActiveItems=(action setActiveItems this)
    clearActiveItems=clearActiveItems
    activeItems=(drop 1 activeItems)
  )
)}}

templates.components.dropdown-list.hbs

{{yield (hash
  item=(component 'dropdown-list-item'
    activeItems=activeItems
    setActiveItems=(action setActiveItems)
    clearActiveItems=(action clearActiveItems)
  )
)}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2",
    "ember-concurrency": "0.8.19",
    "ember-modal-dialog": "2.4.4",
    "ember-composable-helpers": "2.1.0"
  }
}