Nav List PoC

components.nav-dropdown-item\.js

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

export default class extends Component {
  element = null;
	visibleTabItems = [];
	visibleDropdownItems = [];

  constructor({ visibleDropdownItems, visibleTabItems }) {
    super(...arguments);
    
    this.visibleTabItems = visibleTabItems;
    this.visibleDropdownItems = visibleDropdownItems;
  }

  @computed('visibleDropdownItems', 'element')
  get visible() {
    if (this.visibleDropdownItems) {
    	return this.visibleDropdownItems.includes(this.element);
    }
    
    return true;
  }

	@computed('visible', 'visibleDropdownItems', 'visibleTabItems', 'element')
  get tabOrder() {
    if (!this.visible) {
      return null;
    }
    
    return this.visibleTabItems.length + this.visibleDropdownItems.indexOf(this.element);
  }
  
  @action
  getElement(element) {
    this.set('element', element);
  }
}

components.nav-dropdown\.js

import Component from '@ember/component';

export default class extends Component {
}

components.nav-list\.js

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

export default class extends Component {
  element = null;
  visibleTabIndices = [0, 1, 2, 3];
  visibleDropdownIndices = [0, 1, 2, 3];
  
  @computed('visibleTabIndices', 'element')
  get visibleTabItems() {
    let items = [];
    
    if (this.element) {
      let tabItems = this.element.getElementsByClassName('tab-item');

      this.visibleTabIndices.forEach((index) => {
        items.push(tabItems[index]);
      });
    }
    
    return items;
  }
  
  @computed('visibleDropdownIndices', 'element')
  get visibleDropdownItems() {
    let items = [];
    
    if (this.element) {
      let dropdownItems = this.element.getElementsByClassName('dropdown-item');

      this.visibleDropdownIndices.forEach((index) => {
        items.push(dropdownItems[index]);
      });
    }
    
    return items;
  }

  @action
  getElement(element) {
    this.set('element', element);
  }
  
  @action
  changeVisibility() {
    this.setProperties({
      visibleTabIndices: [0, 1],
      visibleDropdownIndices: [2, 3]
    });
  }
}

components.nav-tab-item\.js

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

export default class extends Component {
  element = null;
	visibleTabItems = [];
	visibleDropdownItems = [];

  constructor({ visibleDropdownItems, visibleTabItems }) {
    super(...arguments);
    
    this.visibleTabItems = visibleTabItems;
    this.visibleDropdownItems = visibleDropdownItems;
  }

  @computed('visibleTabItems', 'element')
  get visible() {
    if (this.visibleTabItems) {
    	return this.visibleTabItems.includes(this.element);
    }
    
    return true;
  }

	@computed('visible', 'visibleDropdownItems', 'visibleTabItems', 'element')
  get tabOrder() {
    if (!this.visible) {
      return null;
    }
    
    return this.visibleTabItems.indexOf(this.element);
  }
  
  @action
  getElement(element) {
    this.set('element', element);
  }
}

components.nav-tabs\.js

import Component from '@ember/component';

export default class extends Component {
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

styles.app\.css

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

.navlist-item {
  display: none;
}

.visible {
  display: block;
}

.invisible {
  display: none;
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
{{#nav-list as |navlist|}}
  {{#navlist.link}}
    one
  {{/navlist.link}}
  {{#navlist.link}}
    two
  {{/navlist.link}}
  {{#navlist.link}}
    three
  {{/navlist.link}}
  {{#navlist.link}}
    four
  {{/navlist.link}}
{{/nav-list}}
<br>
<br>

templates.components.nav-dropdown-item\.hbs

<div class="navlist-item dropdown-item {{if this.visible 'visible' 'invisible'}}" {{did-insert this.getElement}}>
  Dropdown Item: {{yield}}
  <span>&#124;</span>
  Tab Order: {{this.tabOrder}}
</div>

templates.components.nav-dropdown\.hbs

{{yield}}

templates.components.nav-list\.hbs

<div id="navlist" {{did-insert this.getElement}}>
  <button {{on 'click' this.changeVisibility}}>Change Visibility</button>
  {{#nav-tabs}}
    {{yield (hash link=(component 'nav-tab-item' visibleDropdownItems=this.visibleDropdownItems visibleTabItems=this.visibleTabItems))}}
  {{/nav-tabs}}
  {{#nav-dropdown}}
    {{yield (hash link=(component 'nav-dropdown-item' visibleDropdownItems=this.visibleDropdownItems visibleTabItems=this.visibleTabItems))}}
  {{/nav-dropdown}}
</div>

templates.components.nav-tab-item\.hbs

<div class="navlist-item tab-item {{if this.visible 'visible' 'invisible'}}" {{did-insert this.getElement}}>
  Tab Item: {{yield}}
  <span>&#124;</span>
  Tab Order: {{this.tabOrder}}
</div>

templates.components.nav-tabs\.hbs

{{yield}}

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "@ember/render-modifiers": "1.0.2"
  }
}