<aside class="sidebar hidden" id="sidebar">
  <div class="sidebar-logo">
    <a class="header-link" href="/">
      <img src="/logo.svg" alt="logo"/>
    </a>
  </div>

  <section class="sidebar-container">
    <button class="close-btn icon" id="close-sidebar">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
        <path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/>
      </svg>
      <span>Close</span>
    </button>
    <div class="sidebar-content">
      <ul class="nav-list" role="list">
        {{#forEach sidebarItems}}
          {{#if children}}
          <li>
            <details>
              <summary>{{name}}</summary>
              <ul class="child-list" role="list">
                {{#forEach children}}
                <li>
                  <a href="{{ path }}">{{ name }}</a>
                </li>
                {{/forEach}}
              </ul>
            </details>
          </li>
          {{else}}
          <li>
            <a href="{{ path }}">{{ name }}</a>
          </li>
          {{/if}}
        {{/forEach}}
      </ul>

      {{#if headerLinks}}
      <div class="sidebar-links">
        {{#each headerLinks}}
        <a class="sidebar-header-link" href="{{this.url}}" target="_blank" rel="noopener noreferrer">{{#if this.icon}}{{{this.icon}}} {{/if}}{{this.label}}</a>
        {{/each}}
      </div>
      {{/if}}
    </div>
  </section>

</aside>

