diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index 364dfd7..3261775 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -9,9 +9,6 @@ import { ImportWizardComponent } from './components/import/import-wizard-compone import { MonthlyComparisonComponent } from './components/analytics/monthly-comparison-component/monthly-comparison-component'; import { TrackingComponent } from './components/tracking/tracking/tracking.component'; import { DashboardComponent } from './components/dashboard-component/dashboard-component.component'; -import { HomeLayoutComponent } from './layouts/home-layout/home-layout.component'; -import { MovementsLayoutComponent } from './layouts/movements-layout/movements-layout.component'; -import { AnalyticsLayoutComponent } from './layouts/analytics-layout/analytics-layout.component'; export const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, @@ -19,7 +16,6 @@ export const routes: Routes = [ { path: 'register', component: RegisterComponent, data: { breadcrumb: 'Register' } }, { path: 'home', - component: HomeLayoutComponent, canActivate: [authenticateGuard], data: { breadcrumb: 'Home' }, children: [ @@ -30,7 +26,6 @@ export const routes: Routes = [ }, { path: 'movements', - component: MovementsLayoutComponent, canActivate: [authenticateGuard], data: { breadcrumb: 'Movements' }, children: [ @@ -41,7 +36,6 @@ export const routes: Routes = [ }, { path: 'analytics', - component: AnalyticsLayoutComponent, canActivate: [authenticateGuard], data: { breadcrumb: 'Analytics' }, children: [ diff --git a/frontend/src/app/components/side-nav-component/side-nav-component.html b/frontend/src/app/components/side-nav-component/side-nav-component.html index 2835caa..ca11f05 100644 --- a/frontend/src/app/components/side-nav-component/side-nav-component.html +++ b/frontend/src/app/components/side-nav-component/side-nav-component.html @@ -103,7 +103,7 @@ - + @if (themeService.isDarkMode()) { light_mode @@ -129,7 +129,7 @@ settings Settings - + logout Logout diff --git a/frontend/src/app/components/side-nav-component/side-nav-component.ts b/frontend/src/app/components/side-nav-component/side-nav-component.ts index 8993cbf..d5e5c85 100644 --- a/frontend/src/app/components/side-nav-component/side-nav-component.ts +++ b/frontend/src/app/components/side-nav-component/side-nav-component.ts @@ -1,4 +1,5 @@ -import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { MatIconButton } from '@angular/material/button'; import { MatIcon } from '@angular/material/icon'; import { MatListItem, MatListItemIcon, MatListItemTitle, MatNavList } from '@angular/material/list'; @@ -44,7 +45,7 @@ import { BreadcrumbComponent } from '../ui-library/breadcrumb/breadcrumb.compone styleUrl: './side-nav-component.css', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class SideNavComponent implements OnInit { +export class SideNavComponent { private readonly accountService = inject(AccountService); private readonly router = inject(Router); protected readonly themeService = inject(ThemeService); @@ -54,13 +55,16 @@ export class SideNavComponent implements OnInit { protected readonly movementsExpanded = signal(false); protected readonly analyticsExpanded = signal(false); - ngOnInit(): void { + constructor() { // Set initial state based on current route this.updateExpandedPanels(this.router.url); // Listen to route changes and update expanded panels this.router.events - .pipe(filter((event): event is NavigationEnd => event instanceof NavigationEnd)) + .pipe( + filter((event): event is NavigationEnd => event instanceof NavigationEnd), + takeUntilDestroyed() + ) .subscribe((event: NavigationEnd) => { this.updateExpandedPanels(event.urlAfterRedirects); }); diff --git a/frontend/src/app/components/ui-library/breadcrumb/breadcrumb.component.ts b/frontend/src/app/components/ui-library/breadcrumb/breadcrumb.component.ts index 80aa071..f9d40b0 100644 --- a/frontend/src/app/components/ui-library/breadcrumb/breadcrumb.component.ts +++ b/frontend/src/app/components/ui-library/breadcrumb/breadcrumb.component.ts @@ -1,4 +1,5 @@ import { Component, inject, signal } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { MatChipsModule } from '@angular/material/chips'; import { FlexComponent } from '../flex-component/flex-component'; import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router'; @@ -23,9 +24,14 @@ export class BreadcrumbComponent { constructor() { // Update breadcrumbs on navigation - this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => { - this.breadcrumbs.set(this.createBreadcrumbs(this.activatedRoute.root)); - }); + this.router.events + .pipe( + filter((event) => event instanceof NavigationEnd), + takeUntilDestroyed() + ) + .subscribe(() => { + this.breadcrumbs.set(this.createBreadcrumbs(this.activatedRoute.root)); + }); // Initial load this.breadcrumbs.set(this.createBreadcrumbs(this.activatedRoute.root)); diff --git a/frontend/src/app/layouts/analytics-layout/analytics-layout.component.ts b/frontend/src/app/layouts/analytics-layout/analytics-layout.component.ts deleted file mode 100644 index a206ac7..0000000 --- a/frontend/src/app/layouts/analytics-layout/analytics-layout.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; - -@Component({ - selector: 'app-analytics-layout', - imports: [RouterOutlet], - template: '', -}) -export class AnalyticsLayoutComponent {} diff --git a/frontend/src/app/layouts/home-layout/home-layout.component.ts b/frontend/src/app/layouts/home-layout/home-layout.component.ts deleted file mode 100644 index 1de1d9a..0000000 --- a/frontend/src/app/layouts/home-layout/home-layout.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; - -@Component({ - selector: 'app-home-layout', - imports: [RouterOutlet], - template: '', -}) -export class HomeLayoutComponent {} diff --git a/frontend/src/app/layouts/movements-layout/movements-layout.component.ts b/frontend/src/app/layouts/movements-layout/movements-layout.component.ts deleted file mode 100644 index 6ee29e7..0000000 --- a/frontend/src/app/layouts/movements-layout/movements-layout.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; - -@Component({ - selector: 'app-movements-layout', - imports: [RouterOutlet], - template: '', -}) -export class MovementsLayoutComponent {}