@for (category of categories$ | async; track category) {
  <div class="category {{category.isOpenned ? 'openned' : ''}}">
    <div id="category-{{category.id}}" class="category-header" (click)="setOpenned(category)">
      {{ category.name }}
      <mat-icon>chevron_right</mat-icon>
    </div>
    <div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
      @for (subCategory of category.subCategories; track subCategory) {
        <a [routerLink]="['/publications']"
           [queryParams]="{'category-id': subCategory.id}"
           (click)="categoryClicked.emit()"
           class="sub-category">
          {{ subCategory.name }}
        </a>
      }
    </div>
  </div>
}