nav-bar.component.html

<div class="nav-bar w-100">
    <evt-button *ngIf="thumbnailsButton" [iconRight]="{icon: 'th'}" additionalClasses="me-1" [active]="thumbnailsPanelOpened$ | async"
        (btnClick)="toggleThumbnailsPanel()" [title]="'thumbnails' | translate"></evt-button>
    <evt-button *ngIf="viscollButton" [iconRight]="{icon: 'rainbow', rotate:270}" additionalClasses="me-1" [active]="viscollPanelOpened$ | async"
        (btnClick)="toggleViscollPanel()" [title]="'viscoll' | translate"></evt-button>
    <ngx-slider *ngIf="pageSliderOptions$ | async as pageSliderOptions" class="ms-2 me-2"
        [value]="currentPageIndex$ | async" [options]="pageSliderOptions" (userChangeEnd)="evtStatusService.updatePageNumber$.next($event?.value)"></ngx-slider>
    <div class="navigation-btns-container">
        <evt-button [iconRight]="{icon: 'step-backward'}" additionalClasses="me-1" [title]="'firstPage' | translate"
            [disabled]="prevNavigationDisabled$ | async" (btnClick)="evtStatusService.updatePageNumber$.next(0)"></evt-button>
        <evt-button [iconRight]="{icon: 'caret-left'}" additionalClasses="me-1" [title]="'previousPage' | translate"
            [disabled]="prevNavigationDisabled$ | async" (btnClick)="evtStatusService.updatePageNumber$.next(currentPageIndexStatic - 1)"></evt-button>
        <evt-button [iconLeft]="{icon: 'caret-right'}" additionalClasses="me-1" [title]="'nextPage' | translate"
            [disabled]="nextNavigationDisabled$ | async" (btnClick)="evtStatusService.updatePageNumber$.next(currentPageIndexStatic + 1)"></evt-button>
        <evt-button [iconLeft]="{icon: 'step-forward'}" [title]="'lastPage' | translate"
            [disabled]="nextNavigationDisabled$ | async" (btnClick)="evtStatusService.updatePageNumber$.next(-1)"></evt-button>
    </div>
</div>

<ng-container *ngIf="thViewerSettings$ | async as thViewerSettings">
    <div *ngIf="thumbnailsPanelOpened$ | async" class="thumbnails-panel" #thumbnailsContainer>
        <evt-manuscript-thumbnails [pages]="evtModelService.pages$ | async" [col]="thViewerSettings?.col" [row]="thViewerSettings?.row"
            (clickedItem)="toggleThumbnailsPanel()"></evt-manuscript-thumbnails> 
    </div>
</ng-container>

<div *ngIf="viscollPanelOpened$ | async" class="viscoll-panel">
    <app-vceditor></app-vceditor>
</div>