frontend/src/app/layout/main-layout/layout.component.html

@@ -1,5 +1,4 @@
 <div class="flex h-screen overflow-hidden">
-  <!-- Sidebar -->
   <div
     [ngStyle]="navigation"
     [class]="
@@ -8,10 +7,10 @@
         : showMobileMenu
           ? 'bg-primary w-64 transition-all duration-300 ease-in-out'
           : isDesktopCollapsed
-            ? 'bg-primary w-48 md:w-16 transition-all duration-300 ease-in-out'
+            ? 'bg-primary w-48 md:w-14 transition-all duration-300 ease-in-out'
             : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out'
     "
-    class="transform h-full z-20 overflow-y-auto fixed md:relative">
+    class="transform h-full z-20 overflow-y-auto fixed md:relative flex flex-col">
     <div
       [ngClass]="showMobileMenu ? 'justify-center' : 'justify-between'"
       [ngStyle]="navigation"
@@ -19,7 +18,7 @@
       <div class="flex items-center justify-center h-full w-full">
         <div class="flex items-center space-x-4">
           @if (!isCollapsed && !isDesktopCollapsed) {
-            <div class="text-primary">Logo</div>
+            <div class="text-primary">LOGO</div>
           }
 
           @if (!isCollapsed && !showMobileMenu) {
@@ -58,15 +57,44 @@
     </div>
     <ul class="m-1">
       <li
-        class="cursor-pointer rounded-btn"
+        class="cursor-pointer rounded-btn mt-2"
         [ngClass]="{
           'bg-base-100 text-primary': item.active,
           'text-primary-content hover:text-base-content': !item.active
         }"
         (click)="setActive(item)"
+        (keydown.enter)="setActive(item)"
+        (keydown.space)="setActive(item)"
+        tabindex="0"
+        role="button"
         *ngFor="let item of menuItems">
         <div
-          class="flex justify-center p-2"
+          class="flex justify-center p-1"
+          *ngIf="isDesktopCollapsed && !showMobileMenu">
+          <span class="p-1" [innerHTML]="item.icon"></span>
+        </div>
+
+        <div
+          class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2"
+          *ngIf="!isDesktopCollapsed || showMobileMenu">
+          <div class="flex items-center">
+            <span [innerHTML]="item.icon" class="mx-2"></span>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <ul class="m-1 mt-auto">
+      <li
+        class="cursor-pointer bg-base-100 text-base-content rounded-btn mb-2"
+        *ngFor="let item of bottomMenuItems"
+        (click)="item.action ? item.action() : null"
+        (keydown.enter)="item.action ? item.action() : null"
+        (keydown.space)="item.action ? item.action() : null"
+        tabindex="0"
+        role="button">
+        <div
+          class="flex justify-center p-1"
           *ngIf="isDesktopCollapsed && !showMobileMenu">
           <span class="p-1" [innerHTML]="item.icon"></span>
         </div>

frontend/src/app/layout/main-layout/layout.component.ts

@@ -9,15 +9,23 @@ import {
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Router, RouterOutlet } from '@angular/router';
 
+import { SuccessDtoApiModel } from '../../api';
 import { BackgroundPatternService, ThemeService } from '../../shared/service';
+import { AuthService } from '../../shared/service/auth.service';
 
-interface MenuItem {
+interface TopMenuItem {
   name: string;
   icon: SafeHtml;
   route: string;
   active?: boolean;
 }
 
+interface BottomMenuItem {
+  name: string;
+  icon: SafeHtml;
+  action?: () => void;
+}
+
 @Component({
   selector: 'app-layout',
   standalone: true,
@@ -31,7 +39,7 @@ export class LayoutComponent implements OnInit {
   public isDesktopCollapsed: boolean = false;
   public showMobileMenu: boolean = false;
   public userHasInteracted: boolean = false;
-  public menuItems: MenuItem[] = [
+  public menuItems: TopMenuItem[] = [
     {
       name: 'Dashboard',
       route: '/dashboard',
@@ -41,6 +49,16 @@ export class LayoutComponent implements OnInit {
       </svg>`),
     },
   ];
+  public bottomMenuItems: BottomMenuItem[] = [
+    {
+      name: 'Logout',
+      action: () => this.signout(),
+      icon: this.sanitizer
+        .bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
+      </svg>`),
+    },
+  ];
   public mainContent: { 'background-image': string } | null = null;
   public navigation: { 'background-image': string } | null = null;
 
@@ -49,7 +67,8 @@ export class LayoutComponent implements OnInit {
     private readonly router: Router,
     private readonly backgroundPatternService: BackgroundPatternService,
     private readonly themeService: ThemeService,
-    private readonly el: ElementRef
+    private readonly el: ElementRef,
+    private readonly authService: AuthService
   ) {}
 
   public ngOnInit(): void {
@@ -122,8 +141,8 @@ export class LayoutComponent implements OnInit {
     this.isDesktopCollapsed = !this.isDesktopCollapsed;
   }
 
-  public setActive(item: MenuItem): void {
+  public setActive(item: TopMenuItem): void {
-    this.menuItems.forEach((menu: MenuItem) => {
+    this.menuItems.forEach((menu: TopMenuItem) => {
       menu.active = false;
     });
     item.active = true;
@@ -132,8 +151,18 @@ export class LayoutComponent implements OnInit {
   private setActiveItemBasedOnRoute(): void {
     const url = this.router.url;
 
-    this.menuItems.forEach((item: MenuItem) => {
+    this.menuItems.forEach((item: TopMenuItem) => {
       item.active = url.startsWith(item.route);
     });
   }
+
+  private signout(): void {
+    this.authService.signout().subscribe((response: SuccessDtoApiModel) => {
+      if (response.success) {
+        this.router.navigate(['/welcome'], {
+          queryParams: { signedOut: true },
+        });
+      }
+    });
+  }
 }

frontend/src/app/pages/register-root/register-root.component.ts

@@ -25,7 +25,7 @@ import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
 import { InputTextModule } from 'primeng/inputtext';
 import { PasswordModule } from 'primeng/password';
-import { delay, finalize, tap } from 'rxjs';
+import { delay, finalize, takeWhile, tap } from 'rxjs';
 
 import {
   Configuration,
@@ -78,6 +78,7 @@ export class RegisterRootComponent implements OnInit {
   public verified: InputSignal<boolean> = input<boolean>(false);
   public login: InputSignal<boolean> = input<boolean>(false);
   public email: InputSignal<string> = input<string>('');
+  public signedOut: InputSignal<boolean> = input<boolean>(true);
   public form!: FormGroup;
   public rememberMe: FormControl = new FormControl(false);
   public isSigninSignal: WritableSignal<boolean> = signal(false);
@@ -107,30 +108,10 @@ export class RegisterRootComponent implements OnInit {
         this.clearRouteParams();
       }
     });
-    const rememberMe = this.localStorageService.getItem<boolean>('remember-me');
-
-    if (rememberMe) {
-      this.authService
-        .status()
-        .pipe(delay(1500))
-        .subscribe({
-          next: (response: SuccessDtoApiModel) => {
-            if (response.success) {
-              this.router.navigate(['/dashboard']);
-            } else {
-              this.displaySkeleton.set(false);
-            }
-          },
-          error: () => {
-            this.displaySkeleton.set(false);
-          },
-        });
-    } else {
-      this.displaySkeleton.set(false);
-    }
   }
 
   public ngOnInit(): void {
+    this.autologin();
     this.setBackground();
     this.initializeForm();
     this.setupValueChanges();
@@ -141,6 +122,30 @@ export class RegisterRootComponent implements OnInit {
     }
   }
 
+  public autologin(): void {
+    const rememberMe = this.localStorageService.getItem<boolean>('remember-me');
+
+    if (rememberMe && !this.signedOut()) {
+      this.authService
+        .status()
+        .pipe(
+          delay(1500),
+          takeWhile((response: SuccessDtoApiModel) => response.success, true),
+          tap({
+            next: (response: SuccessDtoApiModel) => {
+              if (response.success) {
+                this.router.navigate(['/dashboard']);
+              }
+            },
+            finalize: () => this.displaySkeleton.set(false),
+          })
+        )
+        .subscribe();
+    } else {
+      this.displaySkeleton.set(false);
+    }
+  }
+
   public setBackground(): void {
     const theme = this.themeService.getTheme();
     let opacity: number;