Kavita/UI/Web/src/app/app.component.html

<div [ngClass]="{'no-transitions' : (transitionState$ | async)}">
    @if (accountService.currentUser$ | async; as currentUser) {
      @if (currentUser && (navService.navbarVisible$ | async) === true) {
        <div class="fullpage-background">
          <div class="background-area">
            <canvas id="backgroundCanvas" class="default-background" style="width: 100%; height: calc(var(--vh) * 100);"></canvas>
          </div>
        </div>
      }
    }
    <app-nav-header></app-nav-header>

    @let sideNavVisible = navService.sideNavVisibility$ | async;
    @let sideNavCollapsed = navService.sideNavCollapsed$ | async;
    @let usePreferenceSideNav = navService.usePreferenceSideNav$ | async;

    <div [ngClass]="{'closed' : sideNavCollapsed, 'content-wrapper': sideNavVisible}">
      @if (sideNavVisible) {
        @if(usePreferenceSideNav) {
          <app-preference-nav></app-preference-nav>
        } @else {
          <app-side-nav></app-side-nav>
        }
      }

      <div class="" [ngClass]="{'g-0': sideNavVisible === false}">
        <a id="content"></a>
        @if (sideNavVisible) {
          <div>
            <div class="companion-bar" [ngClass]="{'companion-bar-content': sideNavCollapsed === false || usePreferenceSideNav,
                  'companion-bar-collapsed': (sideNavCollapsed && usePreferenceSideNav)}">
              <router-outlet></router-outlet>
            </div>
          </div>
        } @else {
          <router-outlet></router-outlet>
        }
      </div>
    </div>

</div>