feat: Refactor routing and layout components for improved navigation and structure

Author: PhantomDave

frontend/src/app/app.routes.ts

@@ -1,6 +1,5 @@
 import { Routes } from '@angular/router';
 
-import { HomeComponent } from './components/home-component/home-component';
 import { LoginComponent } from './components/welcome-layout/login-component/login-component';
 import { RegisterComponent } from './components/welcome-layout/register-component/register-component';
 import { authenticateGuard } from './guards/authenticate-guard';
@@ -9,20 +8,56 @@ import { SettingsComponent } from './components/settings-component/settings-comp
 import { ImportWizardComponent } from './components/import/import-wizard-component/import-wizard-component';
 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' },
-  { path: 'login', component: LoginComponent },
-  { path: 'register', component: RegisterComponent },
-  { path: 'home', component: HomeComponent, canActivate: [authenticateGuard] },
-  { path: 'movements', component: TrackingComponent, canActivate: [authenticateGuard] },
-  { path: 'balance', component: BalanceComponent, canActivate: [authenticateGuard] },
-  { path: 'settings', component: SettingsComponent, canActivate: [authenticateGuard] },
-  { path: 'import', component: ImportWizardComponent, canActivate: [authenticateGuard] },
+  { path: 'login', component: LoginComponent, data: { breadcrumb: 'Login' } },
+  { path: 'register', component: RegisterComponent, data: { breadcrumb: 'Register' } },
   {
-    path: 'analytics/monthly-comparison',
-    component: MonthlyComparisonComponent,
+    path: 'home',
+    component: HomeLayoutComponent,
     canActivate: [authenticateGuard],
+    data: { breadcrumb: 'Home' },
+    children: [
+      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+      { path: 'dashboard', component: DashboardComponent, data: { breadcrumb: 'Dashboard' } },
+      { path: 'balance', component: BalanceComponent, data: { breadcrumb: 'Balance' } },
+    ],
+  },
+  {
+    path: 'movements',
+    component: MovementsLayoutComponent,
+    canActivate: [authenticateGuard],
+    data: { breadcrumb: 'Movements' },
+    children: [
+      { path: '', redirectTo: 'tracking', pathMatch: 'full' },
+      { path: 'tracking', component: TrackingComponent, data: { breadcrumb: 'Tracking' } },
+      { path: 'import', component: ImportWizardComponent, data: { breadcrumb: 'Import' } },
+    ],
+  },
+  {
+    path: 'analytics',
+    component: AnalyticsLayoutComponent,
+    canActivate: [authenticateGuard],
+    data: { breadcrumb: 'Analytics' },
+    children: [
+      { path: '', redirectTo: 'monthly-comparison', pathMatch: 'full' },
+      {
+        path: 'monthly-comparison',
+        component: MonthlyComparisonComponent,
+        data: { breadcrumb: 'Monthly Comparison' },
+      },
+    ],
+  },
+  {
+    path: 'settings',
+    component: SettingsComponent,
+    canActivate: [authenticateGuard],
+    data: { breadcrumb: 'Settings' },
   },
   { path: '**', redirectTo: 'login' },
 ];

frontend/src/app/components/side-nav-component/side-nav-component.css

@@ -7,66 +7,126 @@
   height: 100%;
 }
 
-.mat-list {
-  align-items: center;
-}
-
 .sidenav {
-  width: 13dvw;
-  background-color: var(--mat-sys-surface-container);
-  color: var(--mat-sys-on-surface);
+  width: 280px;
   border-right: 1px solid var(--mat-sys-outline-variant);
 }
 
 .sidenav-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--mat-sys-surface);
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
+  min-height: 64px;
+  padding: 0 8px;
+}
+
+.app-title {
+  font-size: 20px;
+  font-weight: 500;
+  margin-left: 8px;
+}
+
+.sidenav-content {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 64px);
+}
+
+nav {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.nav-accordion {
+  display: block;
+}
+
+.nav-panel {
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+.nav-panel .mat-expansion-panel-header {
+  padding: 0 16px;
+  height: 48px;
+}
+
+.nav-panel .mat-expansion-panel-body {
+  padding: 0;
+}
+
+.panel-title {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  color: var(--mat-sys-on-surface);
+  gap: 12px;
 }
 
-.app-title {
-  font-weight: 600;
-  letter-spacing: 0.2px;
+.panel-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
 }
 
-.nav-item {
-  color: var(--mat-sys-on-surface);
+mat-nav-list {
+  padding: 0;
 }
 
-.nav-item [matListItemLine] {
-  color: var(--mat-sys-on-surface-variant);
+mat-nav-list a[mat-list-item] {
+  height: 40px;
 }
 
-.nav-item[aria-current='page'],
-.nav-item.active {
+.active-link {
   background-color: var(--mat-sys-secondary-container);
   color: var(--mat-sys-on-secondary-container);
 }
 
-.nav-item[aria-current='page'] [matListItemLine],
-.nav-item.active [matListItemLine] {
+.active-link mat-icon {
   color: var(--mat-sys-on-secondary-container);
-  opacity: 0.9;
 }
 
-.nav-item:hover {
-  background-color: var(--mat-sys-surface-container-high);
+mat-divider {
+  margin: 8px 0;
 }
 
-.nav-item:focus-visible {
-  outline: 2px solid var(--mat-sys-outline);
-  outline-offset: -2px;
+.account-actions {
+  padding: 8px 0;
 }
 
-.content {
-  padding: 16px;
+.account-actions a[mat-list-item] {
+  cursor: pointer;
+  padding: 0 16px;
+}
+
+.sidenav-main-content {
+  display: flex;
+  flex-direction: column;
   height: 100%;
-  overflow: auto;
-  box-sizing: border-box;
 }
 
-.mat-mdc-list-base {
-  width: 100%;
+.mobile-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--mat-sys-surface);
+  border-bottom: 1px solid var(--mat-sys-outline-variant);
+}
+
+.content-wrapper {
+  padding: 16px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.breadcrumb {
+  margin-bottom: 8px;
+}
+
+.breadcrumb.closed {
+  margin-left: 0;
+}
+
+.breadcrumb.open {
+  margin-bottom: 16px;
 }