<%
var categories = [
  // order: 1x
  { path: 'docs/plugins/', name: 'Plugins', link: true },
  // order: 2x
  { path: 'docs/dashboard/', name: 'Local Sources', link: false },
  // order: 3x
  { path: 'docs/providers/', name: 'Remote Providers', link: true },
  // order: 4x
  { path: 'docs/tus/', name: 'Uploaders', link: false },
  // order: 5x
  { path: 'docs/status-bar/', name: 'UI Elements', link: false },
  // order: 6x
  { path: 'docs/transloadit/', name: 'File Processing', link: false },
  // order: 7x
  { path: 'docs/form/', name: 'Miscellaneous', link: false },
  // order: 8x
  { path: 'docs/react/', name: 'React Components', link: true },
]
%>
<div class="Sidebar js-Sidebar">
  <ul class="main-menu">
    <%- partial('partials/main_menu') %>
  </ul>
  <div class="list">
    <h2>
      <% if (page.type) { %>
        <a href="/<%- type %>"><%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %></a>
      <% } %>
    </h2>
    <ul class="menu-root">
      <% site.pages.find({ type }).sort('order').each((p) => { %>
        <% var path = p.path.replace(/index\.html$/, ''); %>
        <% var category = categories.find((c) => c.path === path) %>
        <% // see https://github.com/vuejs/vuejs.org/blob/master/themes/vue/layout/partials/toc.ejs %>
        <% if (category) { %>
          <li>
            <% if (category.link) { %>
              <h3><a href="/<%- category.path %>"><%- category.name %></a></h3>
            <% } else { %>
              <h3><%- category.name %></h3>
            <% } %>
          </li>
          <li>
            <a href="/<%- path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
          </li>
        <% } else { %>
          <li>
            <a href="/<%- path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
          </li>
        <% } %>
      <% }) %>
    </ul>
    <%- partial('partials/social') %>
  </div>
</div>
