<aside class="devcm-sidebar" th:fragment="explorer (pageType)" th:aria-label="#{devcm.explorer.title}">
  <section class="devcm-side-section">
    <div class="devcm-section-title">
      <span th:text="#{devcm.explorer.title}">EXPLORER</span>
      <span aria-hidden="true">...</span>
    </div>
    <div class="devcm-tree" th:with="menu = ${menuFinder.getPrimary()}">
      <details class="devcm-tree-folder" open>
        <summary class="devcm-tree__item devcm-tree__item--folder">
          <span class="devcm-tree__chev" aria-hidden="true"></span>
          <i class="devcm-tree__icon i-pixelarticons-folder"></i>
          <span th:text="#{devcm.explorer.pages}">pages</span>
        </summary>
        <div class="devcm-tree__nested">
          <th:block th:if="${menu != null}" th:replace="~{modules/menu-tree :: items(items=${menu.menuItems})}" />
        </div>
      </details>
    </div>
  </section>

  <section class="devcm-side-section" th:if="${categories != null}">
    <div class="devcm-section-title">
      <span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
      <span aria-hidden="true">...</span>
    </div>
    <ul class="devcm-tree devcm-tree--list">
      <li th:replace="~{modules/category-tree :: single(categories=${categories})}"></li>
    </ul>
  </section>

  <section class="devcm-side-section" th:if="${tags != null}">
    <div class="devcm-section-title">
      <span th:text="#{devcm.explorer.tags}">TAGS CLOUD</span>
      <span aria-hidden="true">...</span>
    </div>
    <div class="devcm-tag-cloud">
      <a
        class="devcm-tag"
        th:each="tag : ${tags}"
        th:href="${tag.status.permalink}"
        th:text="'#' + ${tag.spec.displayName}"
      >
        #tag
      </a>
    </div>
  </section>
</aside>
