added tasks and editor pages

src/app/app.routes.ts

@@ -3,11 +3,28 @@ import { Login } from '@pages/auth/login/login';
 import { Signup } from '@pages/auth/signup/signup';
 import { AppLayout } from '@layouts/app-layout/app-layout';
 import { authGuard } from '@guards/auth-guard';
+import { FlowEditor } from '@layouts/flow-editor/flow-editor';
+import { Tasks } from '@layouts/tasks/tasks';
 
 export const routes: Routes = [
  {
     path: '',
     component: AppLayout,
+    children: [
+      {
+        path: '',
+        redirectTo: 'editor',
+        pathMatch: 'full'
+      },
+      {
+        path: 'editor',
+        component: FlowEditor
+      },
+      { 
+        path: 'tasks',
+        component: Tasks
+      }
+    ],
     canActivate: [authGuard]
  },  
 {

src/app/layouts/app-layout/app-layout.css

@@ -1,7 +1,6 @@
 /* Header fisso */
 .app-header {
   font-family: 'Roboto', sans-serif;
-  border-bottom: 1px solid #ddd;
 }
 
 /* Logo */
@@ -23,3 +22,11 @@
 .nav-tabs {
   border-bottom: 1px solid #ccc;
 }
+
+.nav-link.active {
+  background-color: #ffffff;
+  color: #0f766e;              /* verde elegante */
+  border: 1px solid #d1d5db;
+  border-bottom-color: white;
+  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.05);
+}

src/app/layouts/app-layout/app-layout.html

@@ -1,43 +1,72 @@
 <div class="main-layout min-h-screen flex flex-col">
 
-  <!-- Header fisso -->
-  <header class="app-header fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 h-16 bg-[#d8f4e7] border-b border-gray-300">
-    <div class="left-section flex items-center gap-4">
-      <img src="/logoNoName.png" alt="Logo" class="logo h-10" />
-      <h1 class="app-title text-lg font-medium text-gray-800 m-0">HumAIn Flow</h1>
+    <!-- Header fisso -->
+    <header
+        class="app-header fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 h-16 bg-[#d8f4e7] border-b-none">
+        <div class="left-section flex items-center gap-4">
+            <img src="/logoNoName.png" alt="Logo" class="logo h-10" />
+            <h1 class="app-title text-lg font-medium text-gray-800 m-0">HumAIn Flow</h1>
+        </div>
+
+        <div class="user-section flex items-center gap-2 text-gray-700 font-medium">
+            <i class="bi bi-person-circle fs-4"></i>
+            <span class="username">{{ loggedUser()?.username }}</span>
+            <div class="relative group inline-flex">
+                <i class="bi bi-box-arrow-right
+           text-secondary hover:text-red-600
+           cursor-pointer transition" (click)="logout()" aria-label="Logout" role="button" tabindex="-1">
+                </i>
+
+                <!-- Tooltip -->
+                <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2
+           opacity-0 group-hover:opacity-100
+           pointer-events-none
+           whitespace-nowrap
+           rounded-md bg-gray-800 px-3 py-1.5
+           text-xs text-white shadow-lg
+           transition-opacity duration-200">
+                    Logout
+                </div>
+            </div>
+
+        </div>
+    </header>
+
+    <!-- Wrapper per compensare header fisso -->
+    <div class="flex-1 pt-16 flex flex-col">
+
+        <ul class="nav sticky-top top-16 z-40
+         flex gap-1 px-3
+        bg-[#d8f4e7] border-b-none shadow-sm">
+
+            <li class="nav-item">
+                <a routerLink="/editor" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" tabindex="-1" class="nav-link
+             px-4 py-2 rounded-t-md
+             text-gray-700 font-medium
+             transition-all duration-200
+             hover:bg-white/60">
+                    <i class="bi bi-diagram-3 me-2"></i>
+                    Editor
+                </a>
+            </li>
+
+            <li class="nav-item">
+                <a routerLink="/tasks" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" tabindex="-1" class="nav-link
+             px-4 py-2 rounded-t-md
+             text-gray-700 font-medium
+             transition-all duration-200
+             hover:bg-white/60">
+                    <i class="bi bi-list-check me-2"></i>
+                    Tasks
+                </a>
+            </li>
+        </ul>
+
+
+        <!-- Contenuto principale scrollabile -->
+        <main class="main-content flex-1 overflow-auto p-4 bg-gray-50">
+            <router-outlet></router-outlet>
+        </main>
+
     </div>
-
-    <div class="user-section flex items-center gap-2 text-gray-700 font-medium">
-      <i class="bi bi-person-circle fs-4"></i>
-      <span class="username">{{ loggedUser()?.username }}</span>
-      <button class="btn btn-sm btn-light border-0 p-1" (click)="logout()" title="Logout" aria-label="Logout">
-        <i class="bi bi-box-arrow-right text-secondary"></i>
-      </button>
-    </div>
-  </header>
-
-  <!-- Wrapper per compensare header fisso -->
-  <div class="flex-1 pt-16 flex flex-col">
-
-    <!-- Tabs sticky sotto header -->
-    <ul class="nav nav-tabs sticky-top top-16 z-40 bg-[#d8f4e7]">
-      <li class="nav-item">
-        <a class="nav-link active" href="#">Active</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#">Link</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="#">Link</a>
-      </li>
-    </ul>
-
-    <!-- Contenuto principale scrollabile -->
-    <main class="main-content flex-1 overflow-auto p-4 bg-gray-50">
-      <p>Qui va il contenuto principale...</p>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
-      <p>Puoi aggiungere tutto ciò che vuoi, scrollando rimane visibile header + tabs.</p>
-    </main>
-
-  </div>
-</div>
+</div>

src/app/layouts/app-layout/app-layout.ts

@@ -1,10 +1,10 @@
 import { Component, inject } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { Authorization } from '@services/authorization/authorization';
 
 @Component({
   selector: 'app-app-layout',
-  imports: [],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './app-layout.html',
   styleUrl: './app-layout.css',
 })

src/app/layouts/flow-editor/flow-editor.html

@@ -0,0 +1 @@
+<p>flow-editor works!</p>

src/app/layouts/flow-editor/flow-editor.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlowEditor } from './flow-editor';
+
+describe('FlowEditor', () => {
+  let component: FlowEditor;
+  let fixture: ComponentFixture<FlowEditor>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FlowEditor]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FlowEditor);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/layouts/flow-editor/flow-editor.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-flow-editor',
+  imports: [],
+  templateUrl: './flow-editor.html',
+  styleUrl: './flow-editor.css',
+})
+export class FlowEditor {
+
+}

src/app/layouts/tasks/tasks.html

@@ -0,0 +1 @@
+<p>tasks works!</p>

src/app/layouts/tasks/tasks.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Tasks } from './tasks';
+
+describe('Tasks', () => {
+  let component: Tasks;
+  let fixture: ComponentFixture<Tasks>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Tasks]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Tasks);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/layouts/tasks/tasks.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tasks',
+  imports: [],
+  templateUrl: './tasks.html',
+  styleUrl: './tasks.css',
+})
+export class Tasks {
+
+}

src/app/services/authorization/authorization.ts

@@ -1,4 +1,4 @@
-import { Injectable, signal } from '@angular/core';
+import { effect, Injectable, signal } from '@angular/core';
 import { User, UserRegistration } from '@models/user';
 import { AuthorizationCallServiceBase } from './authorization-call.base';
 import { environment } from '@environment';
@@ -11,11 +11,10 @@ export class Authorization {
 
   private readonly apiUrl = environment.apiUrl + '/auth';
 
+  private user = signal<User | null>(null);
 
   authCall: AuthorizationCallServiceBase = new environment.authorizationCallService();
 
-  private user = signal<User | null>(null);
-
   loggedInUser = this.user.asReadonly();
 
   login(username: string, password: string) {
@@ -23,6 +22,7 @@ export class Authorization {
       take(1),
       tap(res => {
         this.user.set(res);
+        localStorage.setItem('loggedInUser', JSON.stringify(res));
       })
     );
   }
@@ -34,15 +34,14 @@ export class Authorization {
   }
 
   logout() {
+    localStorage.removeItem('loggedInUser');
     this.user.set(null);
   }
 
   isLoggedIn(): boolean {
-    return this.user() !== null;
-  }
-
-  getUsername(): string | null {
-    return this.user()?.email || null;
+    const storedUser = localStorage.getItem('loggedInUser');
+    this.user.set(storedUser != null ? JSON.parse(storedUser) : null);
+    return storedUser != null;
   }
 
 }