Added a fade in on intial load. Would love to have everything in the virtual scroller invisible because they we can avoid the page shift.

Added a bar on the bottom of compainion-bar.

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

@@ -4,7 +4,7 @@
         <a id="content"></a>
         <app-side-nav *ngIf="navService.sideNavVisibility$ | async"></app-side-nav>
 
-        <div class="container-fluid" [ngClass]="{'g-0': (navService.sideNavVisibility$ | async) === false}">
+        <div class="container-fluid fadein" [ngClass]="{'g-0': (navService.sideNavVisibility$ | async) === false}">
             <div style="padding: 20px 0 0;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
                 <div class="companion-bar" [ngClass]="{'companion-bar-content': (navService.sideNavCollapsed$ | async) === false}">
                     <router-outlet></router-outlet>

UI/Web/src/app/app.component.scss

@@ -38,3 +38,17 @@
         width: auto;
     }
 }
+
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.fadein {
+    animation: 2s fadeInUp;
+}

UI/Web/src/app/app.component.ts

@@ -12,17 +12,30 @@ import {ThemeService} from "./_services/theme.service";
 import { SideNavComponent } from './sidenav/_components/side-nav/side-nav.component';
 import {NavHeaderComponent} from "./nav/_components/nav-header/nav-header.component";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
+import {animate, state, style, transition, trigger} from "@angular/animations";
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
     standalone: true,
+  animations: [
+      trigger('fadeIn', [
+        // the "out" style determines the "resting" state of the element when it is visible.
+        state('out', style({opacity: 0})),
+        // in state
+        state('in', style({opacity: 1})),
+
+        transition('out => in', animate('700ms ease-in')),
+        transition('in => out', animate('700ms ease-in')),
+      ])
+  ],
   imports: [NgClass, NgIf, SideNavComponent, RouterOutlet, AsyncPipe, NavHeaderComponent]
 })
 export class AppComponent implements OnInit {
 
   transitionState$!: Observable<boolean>;
+  fade = 'out';
 
   private readonly destroyRef = inject(DestroyRef);
   private readonly offcanvas = inject(NgbOffcanvas);

UI/Web/src/app/sidenav/_components/side-nav-companion-bar/side-nav-companion-bar.component.html

@@ -1,5 +1,5 @@
 <ng-container *transloco="let t; read: 'side-nav-companion-bar'">
-  <div class="mt-0 d-flex justify-content-between align-items-center">
+  <div class="mt-0 d-flex justify-content-between align-items-center shadow-sm">
     <div>
       <ng-content select="[title]"></ng-content>
       <ng-content select="[subtitle]"></ng-content>