@rtsee/ngx 0.0.58 → 0.0.59

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.0.59 (2025-09-21)
+
+**Note:** Version bump only for package @rtsee/ngx
+
 ## 0.0.58 (2025-08-11)
 
 **Note:** Version bump only for package @rtsee/ngx

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.58",
+  "version": "0.0.59",
   "name": "@rtsee/ngx",
   "module": "./dist/ngx/fesm2022/rtsee-ngx.mjs",
   "types": "./dist/ngx/index.d.ts",
@@ -30,15 +30,18 @@
     "@angular/platform-browser": "~20.1.2",
     "@angular/platform-browser-dynamic": "~20.1.2",
     "@angular/router": "~20.1.2",
-    "@rtsee/common": "^0.0.28",
-    "@rtsee/conference": "^0.0.29",
-    "@rtsee/events-dashboard": "^0.0.62",
-    "@rtsee/factory": "^0.0.71",
-    "@rtsee/messenger": "^0.0.62",
+    "@primeuix/themes": "^1.2.3",
+    "@rtsee/common": "^0.0.29",
+    "@rtsee/conference": "^0.0.30",
+    "@rtsee/events-dashboard": "^0.0.63",
+    "@rtsee/factory": "^0.0.72",
+    "@rtsee/messenger": "^0.0.63",
     "@rtsee/signaling-client": "^0.0.66",
     "dayjs": "^1.11.9",
     "ngx-autosize": "^2.0.4",
+    "ngx-captcha": "^14.0.0",
     "ngx-infinite-scroll": "20.0.0",
+    "primeng": "^20.1.2",
     "rxjs": "~7.8.0",
     "shave": "^5.0.0",
     "swiper": "^11.1.15",
@@ -58,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "468df28ddef4b2daa3f7780c7f4efeb3fea9365c"
+  "gitHead": "07cce216164a8c6a5639bf0e54e8ad7f71c9d6db"
 }

package/projects/ngx/src/lib/common/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './server-errors';

package/projects/ngx/src/lib/common/interfaces/server-errors.ts

@@ -0,0 +1,5 @@
+export interface ServerSideError {
+  error: {
+    message: string;
+  }
+}

package/projects/ngx/src/lib/components/rtsee-auth/auth/auth.component.html

@@ -1,12 +1,16 @@
 <div class="rtsee-auth">
-  <button (click)="activeComponent = 'sign-in'">Sing In</button>
-  <button (click)="activeComponent = 'sign-up'">Sing Up</button>
-  <button (click)="activeComponent = 'forgot-password'">Forgot Password</button>
-  <button (click)="activeComponent = 'reset-password'">Reset Password</button>
-
-
-  <rtsee-sign-in *ngIf="activeComponent === 'sign-in'"></rtsee-sign-in>
-  <rtsee-sign-up *ngIf="activeComponent === 'sign-up'"></rtsee-sign-up>
-  <rtsee-forgot-password *ngIf="activeComponent === 'forgot-password'"></rtsee-forgot-password>
-  <rtsee-reset-password *ngIf="activeComponent === 'reset-password'"></rtsee-reset-password>
+  @if (authService.rtseeAuth) {
+    @if (activeComponent === 'sign-in') {
+      <rtsee-sign-in></rtsee-sign-in>
+    }
+    @if (activeComponent === 'sign-up') {
+      <rtsee-sign-up></rtsee-sign-up>
+    }
+    @if (activeComponent === 'forgot-password') {
+      <rtsee-forgot-password></rtsee-forgot-password>
+    }
+    @if (activeComponent === 'reset-password') {
+      <rtsee-reset-password *ngIf="activeComponent === 'reset-password'"></rtsee-reset-password>
+    }
+  }
 </div>

package/projects/ngx/src/lib/components/rtsee-auth/auth/auth.component.ts

@@ -6,6 +6,7 @@ import {ResetPasswordComponent} from "../reset-password/reset-password.component
 import {NgIf} from "@angular/common";
 import {RTSeeAuthService} from "../services/auth.service";
 import {RTSeeAuth} from "@rtsee/auth";
+import {AuthEndpointsKeys, DEFAULT_ROUTE_NAMES} from "@rtsee/auth";
 
 @Component({
   selector: 'rtsee-auth',
@@ -24,7 +25,22 @@ export class RTSeeAuthComponent implements OnInit {
 
   activeComponent: 'reset-password' | 'sign-up' | 'sign-in' | 'forgot-password' = 'sign-in' ;
 
-  constructor(private authService: RTSeeAuthService) {}
+  constructor(public authService: RTSeeAuthService) {
+    console.log('constructor', window.location.pathname);
+
+    if (window.location.pathname.includes(DEFAULT_ROUTE_NAMES[AuthEndpointsKeys.SIGN_IN])) {
+      this.activeComponent = 'sign-in';
+    } else if (window.location.pathname.includes(DEFAULT_ROUTE_NAMES[AuthEndpointsKeys.SIGN_UP])) {
+      this.activeComponent = 'sign-up';
+    } else if (window.location.pathname.includes(DEFAULT_ROUTE_NAMES[AuthEndpointsKeys.FORGOT_PASSWORD])) {
+      this.activeComponent = 'forgot-password';
+    } else if (
+      window.location.pathname
+      .includes(DEFAULT_ROUTE_NAMES[AuthEndpointsKeys.RESET_PASSWORD].split('/')[0])
+    ) {
+      this.activeComponent = 'reset-password';
+    }
+  }
 
   ngOnInit() {
     this.authService.init(this.auth);

package/projects/ngx/src/lib/components/rtsee-auth/forgot-password/forgot-password.component.html

@@ -30,6 +30,6 @@
 
   <!-- Redirect to Sign-In -->
   <p class="auth-media-blue-gray-sm-normal">
-    Пам'ятаєте пароль? <a [routerLink]="['/', 'sign-in']" class="auth-deep-blue-sm-medium">Увійдіть</a>
+    Пам'ятаєте пароль? <a [routerLink]="authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)" class="auth-deep-blue-sm-medium">Увійдіть</a>
   </p>
 </div>

package/projects/ngx/src/lib/components/rtsee-auth/forgot-password/forgot-password.component.ts

@@ -3,6 +3,8 @@ import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/
 import { UtilsService } from '../services/utils.service';
 import { ForgotPasswordForm, TypedReactiveForm } from '../types/auth-form.type';
 import {RouterLink} from "@angular/router";
+import { RTSeeAuthConfiguration, AuthEndpointsKeys } from "@rtsee/auth";
+import { RTSeeAuthService } from "../services/auth.service";
 
 @Component({
   selector: 'rtsee-forgot-password',
@@ -17,18 +19,24 @@ export class ForgotPasswordComponent {
   public isLoading: boolean = false;
   public readonly emailForm: FormGroup<TypedReactiveForm<ForgotPasswordForm>>;
   public readonly forgotPasswordFormKeys: Record<keyof ForgotPasswordForm, string>;
+  authConfiguration: RTSeeAuthConfiguration;
+
   constructor(
-    private readonly formBuilder: FormBuilder
+    private readonly formBuilder: FormBuilder,
+    private authService: RTSeeAuthService
   ) {
     this.emailForm= this.formBuilder.group<TypedReactiveForm<ForgotPasswordForm>>({
-      email: this.formBuilder.control(null, { validators: [Validators.required, Validators.email] }),
+      email: this.formBuilder.nonNullable.control('', { validators: [Validators.required, Validators.email] }),
     });
     this.forgotPasswordFormKeys = UtilsService.getKeysAsValueObject(this.emailForm.getRawValue());
+    this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
   }
 
   public submitEmail(): void {
     if (this.emailForm.valid) {
     }
   }
+
+  protected readonly AuthEndpointsKeys = AuthEndpointsKeys;
 }
 

package/projects/ngx/src/lib/components/rtsee-auth/reset-password/reset-password.component.ts

@@ -2,9 +2,11 @@ import { Component, OnInit } from '@angular/core';
 import {FormBuilder, FormGroup, ReactiveFormsModule, ValidatorFn, Validators} from '@angular/forms';
 import { ResetPasswordForm, TypedReactiveForm } from '../types/auth-form.type';
 import { UtilsService } from '../services/utils.service';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { FormErrorKey } from '../../enums/form.enum';
 import { COMMON_CONSTANTS } from '../../constans/common.const';
+import { RTSeeAuthService } from "../services/auth.service";
+import { RTSeeAuthConfiguration } from "@rtsee/auth";
 
 @Component({
   selector: 'rtsee-reset-password',
@@ -23,17 +25,19 @@ export class ResetPasswordComponent implements OnInit {
     passwordConfirm: true
   };
   private token!: string;
+  authConfiguration: RTSeeAuthConfiguration;
 
   constructor(
     private formBuilder: FormBuilder,
     private route: ActivatedRoute,
-    private router: Router
+    private authService: RTSeeAuthService
   ) {
     this.resetPasswordForm = this.formBuilder.group({
       password: this.formBuilder.control('', {validators: [Validators.required, Validators.minLength(COMMON_CONSTANTS.minPasswordLength)], nonNullable: true}),
       passwordConfirm: this.formBuilder.control('', {validators: [Validators.required, Validators.minLength(COMMON_CONSTANTS.minPasswordLength)], nonNullable: true}),
     }, {validators: [this.passwordMatchValidator()]});
     this.passwordFormKeys = UtilsService.getKeysAsValueObject(this.resetPasswordForm.value);
+    this.authConfiguration = this.authService.authConfiguration;
   }
 
   public ngOnInit(): void {

package/projects/ngx/src/lib/components/rtsee-auth/services/auth.service.ts

@@ -6,6 +6,8 @@ import {
   IRTSeeSignInResponse,
   IRtseeSignUpRequestOptions,
   IRTSeeSignUpResponse,
+  AuthEndpointsKeys,
+  RTSeeAuthConfiguration
 } from "@rtsee/auth";
 import { Observable, tap } from "rxjs";
 
@@ -14,24 +16,25 @@ import { Observable, tap } from "rxjs";
 })
 export class RTSeeAuthService {
   rtseeAuth!: RTSeeAuth<any>;
+  authConfiguration!: RTSeeAuthConfiguration;
 
   constructor(
     private http: HttpClient,
   ) {}
 
   init(auth: RTSeeAuth<any>) {
-    console.log('init');
     this.rtseeAuth = auth;
+    this.authConfiguration = this.rtseeAuth.authConfiguration;
   }
 
   signIn(credentials: IRtseeSignInRequestOptions): Observable<IRTSeeSignInResponse> {
     return this.http
-      .post<IRTSeeSignInResponse>(`${this.rtseeAuth.baseUrl}/${this.rtseeAuth.endpoints.signIn}`, credentials)
+      .post<IRTSeeSignInResponse>(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_IN), credentials)
       .pipe(tap((res) => this.rtseeAuth.authenticate(res)))
   }
 
   signUp(credentials: IRtseeSignUpRequestOptions): Observable<IRTSeeSignUpResponse> {
     return this.http
-      .post<IRTSeeSignUpResponse>(`${this.rtseeAuth.baseUrl}/${this.rtseeAuth.endpoints.signUp}`, credentials)
+      .post<IRTSeeSignUpResponse>(this.authConfiguration.getEndpointPathByEndpointName(AuthEndpointsKeys.SIGN_UP), credentials)
   }
 }

package/projects/ngx/src/lib/components/rtsee-auth/sign-in/sign-in.component.html

@@ -1,45 +1,83 @@
-<div class="auth-container">
-  <img ngSrc="/assets/img.png"
+<div class="auth-container rtsee-form-container" >
+  <img [ngSrc]="authConfiguration.appLogo"
        alt="Company Logo"
        class="auth-logo"
-       height="38"
+       height="37"
        width="37"
   />
-  <h2 class="auth-title">Вйоб в Особистий Кабінет</h2>
+  <h2 class="auth-title">Вхід в Особистий Кабінет</h2>
   <p class="auth-title-description">Аби переглядати казки, увійдіть в свій особистий кабінет</p>
 
-  <form class="auth-form" [formGroup]="signInForm" (ngSubmit)="login()">
-    <label for="sign-in-email" class="auth-sm-medium">Електрон пош</label>
-    <input [formControlName]="signInFormKeys.username"
-           type="email"
-           id="sign-in-email"
-           placeholder="Введіть електронну пошту"
-           class="auth-input-container email-input"
-    />
-    <label for="password" class="auth-sm-medium">Пароль</label>
-    <input [formControlName]="signInFormKeys.password"
-           type="password"
-           id="password"
-           placeholder="Пароль"
-           class="auth-input-container password-input"
-    />
-    <div class="auth-options">
-      <label class="auth-checkbox-label">
-        <input type="checkbox" class="auth-deep-blue-sm-medium auth-remember-checkbox" />
-        Запам’ятати
-      </label>
-      <a href="#" [routerLink]="['/', 'forgot-password']"
+  <form class="auth-form rtsee-form" [formGroup]="signInForm" (ngSubmit)="login()">
+    <div class="rtsee-form-field-container">
+      <p-inputgroup >
+        <p-floatlabel variant="on">
+          <input id="user-email"
+                 pInputText
+                 [formControl]="usernameField"
+          />
+          <label for="user-email">Email</label>
+        </p-floatlabel>
+      </p-inputgroup>
+      @if (!usernameField.valid && usernameField.touched) {
+        <p-message class="rtsee-form-field-error-message"
+                   severity="error"
+                   variant="simple"
+                   size="small"
+        >Email is invalid</p-message>
+      }
+    </div>
+    <div class="rtsee-form-field-container">
+      <p-inputgroup>
+        <p-floatlabel variant="on">
+          <p-password id="user-password"
+                      [formControl]="passwordField"
+                      [feedback]="false"
+          />
+          <label for="user-password">Password</label>
+        </p-floatlabel>
+      </p-inputgroup>
+
+      @if (!passwordField.valid && passwordField.touched) {
+        <p-message class="rtsee-form-field-error-message"
+                   severity="error"
+                   variant="simple"
+                   size="small"
+        >Password is required</p-message>
+      }
+      @if (serverSideError) {
+        <p-message class="rtsee-form-field-error-message"
+                   severity="error"
+                   variant="simple"
+                   size="small"
+        >{{serverSideError}}</p-message>
+      }
+    </div>
+    <div class="rtsee-form-field-container">
+      <p-checkbox inputId="remember" [binary]="true" [formControl]="rememberField" />
+      <label for="remember" class="ml-2"> Remember me </label>
+    </div>
+    <div class="rtsee-form-field-container">
+      <a href="#"
+         [routerLink]="authConfiguration.getRoutePathSplit(AuthEndpointsKeys.FORGOT_PASSWORD)"
          class="auth-deep-blue-sm-medium"
       >Забули пароль?</a>
     </div>
-
-    <button type="submit" class="auth-btn-container">Увійти</button>
+    <div class="rtsee-form-submit-container">
+      <p-button type="submit"
+                label="Sign In"
+                [disabled]="loadInProgress"
+      />
+      @if (loadInProgress) {
+        <p-progress-spinner class="rtsee-progress-spinner rtsee-progress-spinner-sm"></p-progress-spinner>
+      }
+    </div>
   </form>
-  <p class="auth-media-blue-gray-sm-normal">
+  <p class="rtsee-form-label">
     <span>Немає акаунту?</span>
     <span>&nbsp;</span>
     <a href="#"
-       [routerLink]="['/', 'sign-up']"
+       [routerLink]="authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_UP)"
        class="auth-deep-blue-sm-medium"
     >Створіть!</a>
   </p>

package/projects/ngx/src/lib/components/rtsee-auth/sign-in/sign-in.component.ts

@@ -1,10 +1,19 @@
 import { Component } from '@angular/core';
-import {Router, RouterLink} from '@angular/router';
-import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
-import { UtilsService } from '../services/utils.service';
+import { Router, RouterLink } from '@angular/router';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { SignInForm, TypedReactiveForm } from '../types/auth-form.type';
-import {NgOptimizedImage} from "@angular/common";
-import { RTSeeAuthService } from "../services/auth.service";
+import { NgOptimizedImage } from '@angular/common';
+import { RTSeeAuthService } from '../services/auth.service';
+import { AuthEndpointsKeys, RTSeeAuthConfiguration } from '@rtsee/auth';
+import { ButtonModule } from 'primeng/button';
+import { InputGroup } from 'primeng/inputgroup';
+import { InputText } from 'primeng/inputtext';
+import { Password } from 'primeng/password';
+import { FloatLabel } from 'primeng/floatlabel';
+import { Checkbox } from 'primeng/checkbox';
+import { Message } from 'primeng/message';
+import { ProgressSpinner } from 'primeng/progressspinner';
+import {ServerSideError} from "../../../common/interfaces";
 
 @Component({
   selector: 'rtsee-sign-in',
@@ -12,37 +21,100 @@ import { RTSeeAuthService } from "../services/auth.service";
   imports: [
     NgOptimizedImage,
     ReactiveFormsModule,
-    RouterLink
+    RouterLink,
+    ButtonModule,
+    InputGroup,
+    InputText,
+    Password,
+    FloatLabel,
+    Checkbox,
+    Message,
+    ProgressSpinner
   ],
   standalone: true
 })
 export class SignInComponent {
-  public readonly signInForm: FormGroup<TypedReactiveForm<SignInForm>>
-  public readonly signInFormKeys: Record<keyof SignInForm, string>;
+  public readonly signInForm: FormGroup<TypedReactiveForm<SignInForm>> = this.formBuilder.group<TypedReactiveForm<SignInForm>>({
+    username: this.formBuilder.nonNullable.control({
+      value: '',
+      disabled: false
+    },
+    {
+      validators: [ Validators.required, Validators.email ]
+    }),
+    password: this.formBuilder.nonNullable.control({
+      value: '',
+      disabled: false
+    }, { validators: [ Validators.required ]}),
+    remember: this.formBuilder.nonNullable.control(false),
+  });
+  public readonly authConfiguration: RTSeeAuthConfiguration;
+  protected readonly AuthEndpointsKeys = AuthEndpointsKeys;
+  public loadInProgress: boolean = false;
+  public serverSideError: string = '';
 
   constructor(
     private readonly formBuilder: FormBuilder,
     private readonly router: Router,
-    private authService: RTSeeAuthService
+    public authService: RTSeeAuthService
   ) {
-    this.signInForm = this.formBuilder.group<TypedReactiveForm<SignInForm>>({
-      username: this.formBuilder.control(null, {validators: [Validators.required, Validators.email]}),
-      password: this.formBuilder.control(null, {validators: [Validators.required]})
-    });
-    this.signInFormKeys = UtilsService.getKeysAsValueObject(this.signInForm.getRawValue());
+    this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
+  }
+
+  get usernameField(): FormControl<string> {
+    return this.signInForm.get('username') as FormControl<string>;
+  }
+
+  get passwordField(): FormControl<string> {
+    return this.signInForm.get('password') as FormControl<string>;
+  }
+
+  get rememberField(): FormControl<boolean> {
+    return this.signInForm.get('remember') as FormControl<boolean>;
   }
 
   public login(): void {
     if (this.signInForm.valid) {
-      const username: string = this.signInForm.getRawValue().username!;
-      const password: string = this.signInForm.getRawValue().password!;
-
-      this.authService.signIn({username, password})
-        .subscribe((success) => {
-          if (success) {
-            void this.router.navigate(this.authService.rtseeAuth.defaultPostLoginRoute);
-          }
+      this.disableFormFields();
+      this.authService.signIn(this.signInForm.getRawValue())
+        .subscribe({
+          next: (() => {
+            void this.router.navigate(this.authService.rtseeAuth.authConfiguration.defaultPostLoginRoute);
+            this.enableFormFields();
+          }),
+          error: ((error: ServerSideError) => {
+            console.log(error);
+            this.showServerSideErrorForXSeconds(error.error.message);
+            this.enableFormFields();
+          }),
+          complete: (() => {
+            this.enableFormFields();
+          })
         });
+    } else {
+      this.signInForm.markAsTouched(); // this does not work after switching to "nonNullable" form fields
     }
   }
+
+  private showServerSideErrorForXSeconds(message: string, x: number = 3): void {
+    this.serverSideError = message;
+
+    setTimeout(() => {
+      this.serverSideError = '';
+    }, x * 1000); // we can do pop-up message instead
+  }
+
+  private disableFormFields(): void {
+    this.loadInProgress = true;
+    this.usernameField.disable();
+    this.passwordField.disable();
+    this.rememberField.disable();
+  }
+
+  private enableFormFields(): void {
+    this.loadInProgress = false;
+    this.usernameField.enable(); // fuck me, but [disabled]="loadInProgress" on the field no longer works :(
+    this.passwordField.enable();
+    this.rememberField.enable();
+  }
 }

package/projects/ngx/src/lib/components/rtsee-auth/sign-up/sign-up.component.html

@@ -46,6 +46,6 @@
 
   <!-- Redirect to Sign-In -->
   <p class="auth-media-blue-gray-sm-normal">
-    Вже маєте акаунт? <a href="#" [routerLink]="['/', 'sign-in']" class="auth-deep-blue-sm-medium">Увійдіть</a>
+    Вже маєте акаунт? <a href="#" [routerLink]="authConfiguration.getRoutePathSplit(AuthEndpointsKeys.SIGN_IN)" class="auth-deep-blue-sm-medium">Увійдіть</a>
   </p>
 </div>

package/projects/ngx/src/lib/components/rtsee-auth/sign-up/sign-up.component.ts

@@ -6,6 +6,7 @@ import {ConfirmPasswordValidator} from "../validators/form-fields-validators";
 import {RouterLink} from "@angular/router";
 import {NgOptimizedImage} from "@angular/common";
 import {RTSeeAuthService} from "../services/auth.service";
+import {RTSeeAuthConfiguration, AuthEndpointsKeys} from "@rtsee/auth";
 
 @Component({
   selector: 'rtsee-sign-up',
@@ -20,6 +21,7 @@ import {RTSeeAuthService} from "../services/auth.service";
 export class SignUpComponent {
   public readonly signUpForm: FormGroup<TypedReactiveForm<SignUpForm>>;
   public readonly signUpFormKeys: Record<keyof SignUpForm, string>;
+  public readonly authConfiguration: RTSeeAuthConfiguration;
 
   constructor(
     private readonly formBuilder: FormBuilder,
@@ -39,6 +41,7 @@ export class SignUpComponent {
       }),
     }, { validators: [ ConfirmPasswordValidator.MatchFields ] });
     this.signUpFormKeys = UtilsService.getKeysAsValueObject(this.signUpForm.getRawValue());
+    this.authConfiguration = this.authService.rtseeAuth.authConfiguration;
   }
 
   public signUp(): void {
@@ -59,4 +62,6 @@ export class SignUpComponent {
       // this.authService.signUp(formValue);
     }
   }
+
+  protected readonly AuthEndpointsKeys = AuthEndpointsKeys;
 }

package/projects/ngx/src/lib/components/rtsee-auth/types/auth-form.type.ts

@@ -26,10 +26,11 @@ export type ConfirmPasswordForm = {
 };
 
 export type ForgotPasswordForm = {
-  email: string | null;
+  email: string;
 };
 
 export type SignInForm = {
-  username: string | null;
-  password: string | null;
+  username: string;
+  password: string;
+  remember: boolean;
 };

package/projects/ngx/src/lib/components/rtsee-container/rtsee-container.component.html

@@ -1,5 +1,4 @@
 <div class="rtsee-shell"
-     [class.rtseeShellConferenceMode]="rtsee.eventsDashboard && rtsee.activeTab === 'events-dashboard'"
      [ngClass]="{
      'rtsee-shell-conference-mode': rtsee.conference && rtsee.conference.isInActiveCall,
      'rtsee-shell-messenger-active': rtsee.messenger && rtsee.activeTab === 'messenger',
@@ -8,43 +7,40 @@
      'rtsee-shell-side-nav-expanded': isSidenavExpanded
      }"
 >
-  <div class="rtsee-sidenav-block">
-    <rtsee-sidenav [config]="navigationConfig" [isExpanded]="isSidenavExpanded" (toggleClicked)="onSidenavToggleClicked()"></rtsee-sidenav>
+  <div class="rtsee-nav-block">
+    <rtsee-nav [config]="navigationConfig"></rtsee-nav>
   </div>
 
   <div class="rtsee-shell-panel">
-    <div class="rtsee-conference-container"
-         *ngIf="rtsee.conference && rtsee.conference.isInActiveCall"
-    >
-      <rtsee-conference [rtSee]="rtsee.conference"
-      ></rtsee-conference>
-    </div>
+    @if (rtsee.conference && rtsee.conference.isInActiveCall) {
+      <div class="rtsee-conference-container">
+        <rtsee-conference [rtSee]="rtsee.conference"
+        ></rtsee-conference>
+      </div>
+    }
 
-    <div class="rtsee-messenger-container"
-         *ngIf="rtsee.messenger"
-    >
-      <rtsee-messenger [messenger]="rtsee.messenger"
-      ></rtsee-messenger>
-    </div>
+    @if (rtsee.messenger) {
+      <div class="rtsee-messenger-container">
+        <rtsee-messenger [messenger]="rtsee.messenger"
+        ></rtsee-messenger>
+      </div>
+    }
 
-    <div class="rtsee-events-dashboard-container"
-         *ngIf="rtsee.eventsDashboard && rtsee.eventsDashboard.isReady"
-    >
-      <rtsee-events-dashboard [eventsDashboard]="rtsee.eventsDashboard"
-      ></rtsee-events-dashboard>
-    </div>
+    @if (rtsee.eventsDashboard && rtsee.eventsDashboard.isReady) {
+      <div class="rtsee-events-dashboard-container">
+        <rtsee-events-dashboard [eventsDashboard]="rtsee.eventsDashboard"
+        ></rtsee-events-dashboard>
+      </div>
+    }
 
-    <div class="rtsee-presentation-container"
-         *ngIf="rtsee.presentation && rtsee.presentation.isActive"
-    >
-      <rtsee-presentation [presentation]="rtsee.presentation"></rtsee-presentation>
-    </div>
+    @if (rtsee.presentation && rtsee.presentation.isActive) {
+      <div class="rtsee-presentation-container">
+        <rtsee-presentation [presentation]="rtsee.presentation"></rtsee-presentation>
+      </div>
+    }
   </div>
 
   <div class="rtsee-content">
       <ng-content></ng-content>
   </div>
-  <div class="rtsee-bottom-nav-block">
-    <rtsee-bottom-nav [config]="navigationConfig"></rtsee-bottom-nav>
-  </div>
 </div>