feat(frontend,backend): redesign UI to header-based nav with lesson access control

UI/UX Redesign:
- Replace sidebar navigation with header-integrated navigation (Udemy/Coursera style)
- Add PageContainer component for consistent max-w-7xl centered layout
- Add professional Footer with branding, links, newsletter, and social icons
- Implement user dropdown menu with role-based navigation sections
- Add mobile hamburger menu with full navigation support

Lesson Access Control (Security Fix):
- Add backend GET /courses/:id/lessons/:lessonId endpoint with enrollment check
- Add getLessonWithAccessControl() in CoursesService
- Implement frontend redirect for non-enrolled users attempting to access locked lessons
- Allow free preview lessons for non-enrolled users (isFreePreview check)
- Show lock icons and "Preview" badges in lesson sidebar

Files Changed:
- Delete sidebar.tsx, rewrite header.tsx (~966 lines)
- Simplify app-shell.tsx, add PageContainer export
- Create footer.tsx with Udemy/Coursera-inspired design
- Update all pages to use PageContainer wrapper
- Update lesson-viewer-page.tsx with access control logic
- Update all E2E tests to work with new navigation structure

All 171 frontend tests and 215 backend tests passing.

Author: PhuocHoan

apps/api/src/courses/courses.controller.ts

@@ -16,6 +16,7 @@ import {
 } from './courses.service';
 import { CourseLevel, Course } from './entities/course.entity';
 import { Enrollment } from './entities/enrollment.entity';
+import { Lesson } from './entities/lesson.entity';
 import { CurrentUser } from '../auth/decorators/current-user.decorator';
 import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
 import { User } from '../users/entities/user.entity';
@@ -108,6 +109,24 @@ export class CoursesController {
     return { isEnrolled: Boolean(enrollment), progress: enrollment };
   }
 
+  /**
+   * Get a specific lesson with access control
+   * Returns lesson content only if user is enrolled or lesson is free preview
+   */
+  @Get(':id/lessons/:lessonId')
+  @UseGuards(JwtAuthGuard)
+  async getLesson(
+    @Param('id') courseId: string,
+    @Param('lessonId') lessonId: string,
+    @CurrentUser() user: User,
+  ): Promise<{ lesson: Lesson; hasAccess: boolean }> {
+    return this.coursesService.getLessonWithAccessControl(
+      user.id,
+      courseId,
+      lessonId,
+    );
+  }
+
   @Post(':id/lessons/:lessonId/complete')
   @UseGuards(JwtAuthGuard)
   async completeLesson(

apps/api/src/courses/courses.service.spec.ts

@@ -5,6 +5,7 @@ import { getRepositoryToken } from '@nestjs/typeorm';
 import { CoursesService } from './courses.service';
 import { Course, CourseLevel } from './entities/course.entity';
 import { Enrollment } from './entities/enrollment.entity';
+import { Lesson } from './entities/lesson.entity';
 
 interface MockEnrollmentRepository {
   find: jest.Mock;
@@ -20,6 +21,14 @@ const mockEnrollmentRepositoryValue: MockEnrollmentRepository = {
   save: jest.fn(),
 };
 
+interface MockLessonRepository {
+  findOne: jest.Mock;
+}
+
+const mockLessonRepositoryValue: MockLessonRepository = {
+  findOne: jest.fn(),
+};
+
 interface MockCourseRepository {
   createQueryBuilder: jest.Mock;
   find: jest.Mock;
@@ -89,6 +98,10 @@ describe('CoursesService', () => {
           provide: getRepositoryToken(Enrollment),
           useValue: mockEnrollmentRepositoryValue,
         },
+        {
+          provide: getRepositoryToken(Lesson),
+          useValue: mockLessonRepositoryValue,
+        },
       ],
     }).compile();
 

apps/api/src/courses/courses.service.ts

@@ -2,6 +2,7 @@ import {
   Injectable,
   NotFoundException,
   ConflictException,
+  ForbiddenException,
 } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 
@@ -10,6 +11,7 @@ import { Repository, Brackets } from 'typeorm';
 import { CourseFilterOptions } from './dto/filter-course.dto';
 import { Course } from './entities/course.entity';
 import { Enrollment } from './entities/enrollment.entity';
+import { Lesson } from './entities/lesson.entity';
 
 export interface EnrolledCourseDto {
   id: string;
@@ -58,6 +60,8 @@ export class CoursesService {
     private coursesRepository: Repository<Course>,
     @InjectRepository(Enrollment)
     private enrollmentRepository: Repository<Enrollment>,
+    @InjectRepository(Lesson)
+    private lessonRepository: Repository<Lesson>,
   ) {}
 
   async findAllPublished(
@@ -227,6 +231,49 @@ export class CoursesService {
     return enrollment;
   }
 
+  /**
+   * Get a specific lesson with access control
+   * Returns full lesson content only if:
+   * 1. User is enrolled in the course, OR
+   * 2. Lesson is marked as free preview
+   * Otherwise, throws ForbiddenException
+   */
+  async getLessonWithAccessControl(
+    userId: string,
+    courseId: string,
+    lessonId: string,
+  ): Promise<{ lesson: Lesson; hasAccess: boolean }> {
+    // Find the lesson
+    const lesson = await this.lessonRepository.findOne({
+      where: { id: lessonId },
+      relations: ['section', 'section.course'],
+    });
+
+    if (!lesson) {
+      throw new NotFoundException('Lesson not found');
+    }
+
+    // Verify the lesson belongs to the specified course
+    if (lesson.section.course.id !== courseId) {
+      throw new NotFoundException('Lesson not found in this course');
+    }
+
+    // Check if user is enrolled
+    const enrollment = await this.checkEnrollment(userId, courseId);
+    const isEnrolled = Boolean(enrollment);
+
+    // Check access: enrolled OR free preview
+    const hasAccess = isEnrolled || lesson.isFreePreview;
+
+    if (!hasAccess) {
+      throw new ForbiddenException(
+        'You must enroll in this course to access this lesson',
+      );
+    }
+
+    return { lesson, hasAccess: true };
+  }
+
   /**
    * Get all enrolled courses for a user with progress calculation
    */

apps/web/src/components/layout/app-shell.tsx

@@ -1,44 +1,36 @@
-import { useState } from 'react';
-
 import { Outlet } from 'react-router-dom';
 
+import { Footer } from './footer';
 import { Header } from './header';
-import { Sidebar } from './sidebar';
 
 export function AppShell() {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
-
-  const handleOverlayClick = () => {
-    setSidebarOpen(false);
-  };
-
-  const handleOverlayKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
-      setSidebarOpen(false);
-    }
-  };
-
   return (
-    <div className="flex min-h-screen bg-background text-foreground font-sans">
-      {/* Mobile overlay */}
-      {sidebarOpen && (
-        <div
-          className="fixed inset-0 bg-black/50 z-40 lg:hidden animate-fade-in"
-          onClick={handleOverlayClick}
-          onKeyDown={handleOverlayKeyDown}
-          role="button"
-          tabIndex={0}
-          aria-label="Close sidebar"
-        />
-      )}
+    <div className="min-h-screen bg-background text-foreground font-sans flex flex-col">
+      <Header />
+      <main className="flex-1">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  );
+}
 
-      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
-      <div className="flex-1 flex flex-col min-w-0">
-        <Header onMenuClick={() => setSidebarOpen(true)} />
-        <main className="flex-1 p-4 sm:p-6 overflow-auto">
-          <Outlet />
-        </main>
-      </div>
+/**
+ * Container component for pages that need centered content with max-width.
+ * Use this wrapper in individual pages for consistent Udemy/Coursera-style layout.
+ */
+export function PageContainer({
+  children,
+  className = '',
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 lg:py-8 ${className}`}
+    >
+      {children}
     </div>
   );
 }