<Toucan::Button @onClick={{this.toggle}} class="lg:hidden">
  <svg class="w-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
    <path
      d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
      clip-rule="evenodd"
      fill-rule="evenodd"
    ></path>
  </svg>

  Contents
</Toucan::Button>

<div
  class="
    mt-0 lg:overflow-y-auto lg:sticky top-16 lg:max-h-(screen-16)
    pt-4 lg:pt-12 pl-4 -ml-4 pb-4 lg:-mt-12 lg:block overflow-hidden
  {{if this.isOpen "block" "hidden"}}
  "
>
  {{! template-lint-disable no-invalid-interactive }}
  <ul class="font-light space-y-3" {{on "click" this.handleSidebarClick}}>
    {{! template-lint-enable no-invalid-interactive }}
    {{#each @node.pages as |page|}}
      <li class="truncate p-2 -m-2">
        <Docfy::PageLink @page={{page}} />
      </li>
    {{/each}}

    {{#each this.orderedChildren as |child|}}
      <li>
        <div class="pb-2 pl-2 type-md-medium italic">
          {{child.label}}
        </div>

        <ul class="pl-4 ml-2 border-l border-lines-dark space-y-3">
          {{#each child.pages as |page|}}
            <li class="truncate p-2 -m-2">
              {{! @glint-ignore }}
              <Docfy::PageLink @page={{page}} />
            </li>
          {{/each}}

          {{#each child.children as |subChild|}}
            <li>
              <div class="pb-2">
                {{subChild.label}}
              </div>

              <ul class="pl-4 ml-2 border-l border-lines-dark space-y-3">
                {{#each subChild.pages as |page|}}
                  <li class="truncate p-2 -m-2">
                    {{! @glint-ignore }}
                    <Docfy::PageLink @page={{page}} />
                  </li>
                {{/each}}
              </ul>
            </li>
          {{/each}}
        </ul>
      </li>
    {{/each}}
  </ul>
</div>
