<nav class="uk-background-muted uk-border-right side-nav">
  <div class="uk-padding-small uk-width-1 uk-text-bold uk-border-bottom">
    <div class="uk-text-center" data-test-nav-title>
      <span class="category-header">
        {{t "alexandria.category-nav.categories"}}
      </span>
    </div>
  </div>
  <ul class="uk-nav uk-width-medium uk-margin-top category-nav">
    <CategoryNav::Category
      @category={{hash
        name=(t "alexandria.category-nav.all-files")
        color="#e3e3e3"
      }}
      @selected={{@selected}}
      data-test-all-files
    />
    {{#if this.categories.isLoading}}
      {{#each (range 0 5) as |index|}}
        <CategoryNav::Category::Skeleton
          @animationDelay={{concat index "00ms"}}
          data-test-skeleton-category
        />
      {{/each}}
    {{else}}
      {{#each this.categories.records as |category|}}
        <CategoryNav::Category
          @category={{category}}
          @selected={{@selected}}
          data-test-category
        />
      {{/each}}
    {{/if}}
  </ul>
</nav>