@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>
}