<div
  class={{class-names
    "euiSideNavItem"
    (if (eq @depth 1) "euiSideNavItem--trunk")
    (if (eq @depth 0) "euiSideNavItem--root")
    (if (and (eq @depth 0) @icon) "euiSideNavItem--rootIcon")
    (if (gt @depth 1) "euiSideNavItem--branch")
    (if @items.length "euiSideNavItem--hasChildItems")
  }}
>
  {{#let
    (class-names
      "euiSideNavItemButton"
      (if (or @onClick @href) "euiSideNavItemButton--isClickable")
      (if (and (gt @depth 0) @isOpen (not @isSelected)) "euiSideNavItemButton-isOpen")
      (if @isSelected "euiSideNavItemButton-isSelected")
      @className
    )
    (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected)) as |className caret|
  }}
    {{#if @href}}
      <a
        class={{className}}
        href={{@href}}
        target={{@target}}
        rel={{@rel}}
        {{on "click" (optional @onClick)}}
      >
        <EuiSideNavItem::Button
          @icon={{@icon}}
          @buttonIconClasses={{@buttonIconClasses}}
          @caret={{caret}}
        >
          {{yield}}
        </EuiSideNavItem::Button>
      </a>
    {{else if @onClick}}
      <button type="button" class={{className}} {{on "click" @onClick}}>
        <EuiSideNavItem::Button
          @icon={{@icon}}
          @buttonIconClasses={{@buttonIconClasses}}
          @caret={{caret}}
        >
          {{yield}}
        </EuiSideNavItem::Button>
      </button>
    {{else}}
      <div class={{className}}>
        <EuiSideNavItem::Button
          @icon={{@icon}}
          @buttonIconClasses={{@buttonIconClasses}}
          @caret={{caret}}
        >
          {{yield}}
        </EuiSideNavItem::Button>
      </div>
    {{/if}}
  {{/let}}
  {{#if (or (eq @depth 0) (and @items.length @isOpen))}}
    <div class="euiSideNavItem__items">
      {{#each @items as |item|}}
        <EuiSideNavItem
          @selectedItem={{@selectedItem}}
          @isOpen={{is-item-open item @selectedItem}}
          @isSelected={{eq item.id @selectedItem}}
          @isParent={{not (not item.items)}}
          @icon={{item.icon}}
          @onClick={{item.onClick}}
          @href={{item.href}}
          @className={{item.className}}
          @rel={{item.rel}}
          @target={{item.target}}
          @items={{item.items}}
          @key={{item.id}}
          @depth={{add @depth 1}}
          @name={{item.name}}
          @renderItem={{item.renderItem}}
        >
          {{item.name}}
        </EuiSideNavItem>
      {{/each}}
    </div>
  {{/if}}
</div>