feat(dashboard): initial core persona developer dashboard implementation

apps/lfx-one/src/app/app.routes.ts

@@ -1,15 +1,65 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
 
-import { Routes } from '@angular/router';
+import { inject } from '@angular/core';
+import { CanActivateFn, Router, Routes } from '@angular/router';
 
 import { authGuard } from './shared/guards/auth.guard';
+import { PersonaService } from './shared/services/persona.service';
+
+/**
+ * Guard to check if new UI persona is selected
+ */
+const newUIGuard: CanActivateFn = () => {
+  const personaService = inject(PersonaService);
+  const router = inject(Router);
+
+  if (personaService.isNewUI()) {
+    return true;
+  }
+
+  // If old UI is selected, redirect to old UI route
+  router.navigate(['/old-ui']);
+  return false;
+};
+
+/**
+ * Guard to check if old UI persona is selected
+ */
+const oldUIGuard: CanActivateFn = () => {
+  const personaService = inject(PersonaService);
+  const router = inject(Router);
+
+  if (personaService.isOldUI()) {
+    return true;
+  }
+
+  // If new UI is selected, redirect to new UI route
+  router.navigate(['/']);
+  return false;
+};
 
 export const routes: Routes = [
   {
     path: '',
+    canActivate: [authGuard, newUIGuard],
+    loadComponent: () => import('./layouts/main-layout/main-layout.component').then((m) => m.MainLayoutComponent),
+    children: [
+      {
+        path: '',
+        loadComponent: () => import('./modules/pages/home-new/home-new.component').then((m) => m.HomeNewComponent),
+      },
+      {
+        path: 'projects',
+        loadComponent: () => import('./modules/pages/home/home.component').then((m) => m.HomeComponent),
+      },
+    ],
+  },
+  // Old UI route - shows when "Old UI" persona is selected
+  {
+    path: 'old-ui',
+    canActivate: [authGuard, oldUIGuard],
     loadComponent: () => import('./modules/pages/home/home.component').then((m) => m.HomeComponent),
-    canActivate: [authGuard],
   },
   {
     path: 'meetings',

apps/lfx-one/src/app/layouts/main-layout/main-layout.component.html

@@ -0,0 +1,14 @@
+<!-- Copyright The Linux Foundation and each contributor to LFX. -->
+<!-- SPDX-License-Identifier: MIT -->
+
+<div class="flex min-h-screen pt-20">
+  <!-- Sidebar -->
+  <div class="w-72 flex-shrink-0">
+    <lfx-sidebar [items]="sidebarItems"></lfx-sidebar>
+  </div>
+
+  <!-- Main Content Area -->
+  <main class="flex-1 min-w-0 transition-all duration-300" data-testid="main-content">
+    <router-outlet />
+  </main>
+</div>

apps/lfx-one/src/app/layouts/main-layout/main-layout.component.scss

@@ -0,0 +1,6 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+:host {
+  display: block;
+}

apps/lfx-one/src/app/layouts/main-layout/main-layout.component.ts

@@ -0,0 +1,50 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { SidebarComponent } from '@components/sidebar/sidebar.component';
+import { SidebarMenuItem } from '@lfx-one/shared/interfaces';
+
+@Component({
+  selector: 'lfx-main-layout',
+  standalone: true,
+  imports: [CommonModule, RouterModule, SidebarComponent],
+  templateUrl: './main-layout.component.html',
+  styleUrl: './main-layout.component.scss',
+})
+export class MainLayoutComponent {
+  // Sidebar navigation items
+  protected readonly sidebarItems: SidebarMenuItem[] = [
+    {
+      label: 'Home',
+      icon: 'fa-light fa-house',
+      routerLink: '/',
+    },
+    {
+      label: 'My Meetings',
+      icon: 'fa-light fa-video',
+      routerLink: '/my-meetings',
+      disabled: true,
+    },
+    {
+      label: 'Project Health',
+      icon: 'fa-light fa-heart-pulse',
+      routerLink: '/project-health',
+      disabled: true,
+    },
+    {
+      label: 'Events & Community',
+      icon: 'fa-light fa-calendar',
+      routerLink: '/events-community',
+      disabled: true,
+    },
+    {
+      label: 'Training & Certification',
+      icon: 'fa-light fa-book-open',
+      routerLink: '/training-certification',
+      disabled: true,
+    },
+  ];
+}