template.hbs

{{#if (or media.isMobile media.isTablet)}}
  <div class='docs-text-right'>
    <button {{action (toggle 'isShowingMenu' this)}}
      class='docs-text-grey-darkest docs-py-2 docs-text-sm docs-rounded docs-uppercase docs-font-medium'>
      ☰ Menu
    </button>
  </div>
{{/if}}

<nav onclick={{action (mut isShowingMenu) false}}
  class='
    docs-absolute docs-pin-r lg:docs-relative docs-bg-white docs-shadow-lg lg:docs-shadow-none
    docs-w-90% docs-px-3 lg:docs-px-0 docs-z-10 lg:docs-w-1/5 docs-flex-no-shrink docs-transition
    docs-max-w-xs docs-mr-2
    {{if (or media.isMobile media.isTablet)
      (if isShowingMenu 'docs-opacity-100' 'docs-opacity-0 docs-pointer-events-none')

    }}
  '>
  <div class='docs-pt-px docs-sticky docs-pin-t docs-mb-8 lg:docs-max-h-screen lg:docs--mt-4 lg:docs-pt-4 lg:docs-overflow-y-scroll'>
    {{#if (or media.isMobile media.isTablet)}}
      <div class="docs-text-right">
        <button onclick={{action (mut isShowingMenu) false}}
          class='docs-text-grey-darkest docs-opacity-50 hover:docs-opacity-100 docs-text-3xl docs-py-2 docs-no-underline'>
          &times;
        </button>
      </div>
    {{/if}}

    {{#docs-viewer/x-nav-list}}
      {{yield (hash
        section=(component 'docs-viewer/x-section')
        item=(component 'docs-viewer/x-nav-item')
        subnav=(component 'docs-viewer/x-nav-list' class='ml-4')
      )}}

    {{/docs-viewer/x-nav-list}}

    <div class="docs-mt-16 lg:docs-mb-16 docs-mr-2 docs-text-xs docs-rounded">
      <a href="https://github.com/ember-learn/ember-cli-addon-docs"
        class='docs-opacity-50 hover:docs-opacity-100 docs-transition docs-no-underline
        docs-text-inherit docs-flex docs-items-center docs-text-grey-darkest'>
        {{svg-jar 'addon-docs-pen' width=22 height=16 class='docs-mr-2'}}
        <div>
          Powered by
          <span class="docs-font-bold">AddonDocs</span>
        </div>
      </a>
    </div>
  </div>
</nav>