{{!
  Trigger button itself
  By using a named block you can place any button as the trigger:
  eg. HeaderSectionItem, EuiButton, EuiButtonIcon, or any custom button
}}
{{#if (not (and @navIsDocked (not @showButtonIfDocked)))}}
  {{yield to="button"}}
{{/if}}

{{!
  The side navigation panel, acts the same way as a flyout
}}
{{#if @isOpen}}
  {{#let (unique-id) as |flyoutId|}}
    {{#unless @navIsDocked}}
      <EuiOverlayMask @onClick={{unless @navIsDocked @onClose}} @headerZindexLocation="below" />
    {{/unless}}
    <nav
      id={{flyoutId}}
      class={{class-names
        "euiCollapsibleNav"
        (if @navIsDocked "euiCollapsibleNav--isDocked")
      }}
      ...attributes
      {{open-collapsible-nav @navIsDocked}}
      {{on-key "Escape" (unless @navIsDocked @onClose)}}
      {{focus-trap
        isActive=(not @navIsDocked)
        focusTrapOptions=(hash
          allowOutsideClick=true
        )
      }}
    >
      {{yield to="content"}}
      {{!
        Close button is for accessibility purposes only
        To close, use ESC key, or click outside the Nav.
        Commented for the time being
      }}
      {{!-- {{#if @showCloseButton}}
        <EuiButtonEmpty
          @onClick={{unless @navIsDocked @onClose}}
          @size="xs"
          @textClasses="euiCollapsibleNav__closeButtonText"
          @iconType="cross"
          class="euiCollapsibleNav__closeButton"
        >
          {{@closeButtonLabel}}
        </EuiButtonEmpty>
      {{/if}} --}}
    </nav>
  {{/let}}
{{/if}}