Patrones de Navegación

Esta guía describe los patrones de navegación utilizados en TalentBricksAI para mantener consistencia en la experiencia de usuario.

Layouts por Sección

Account Layout

Todas las páginas de cuenta (/account/*) usan AccountLayout para proveer navegación unificada.

import { AccountLayout } from "../user/layout";

export default function MyAccountPage({ user }) {
  return (
    <AccountLayout>
      <h1>Contenido de la página</h1>
    </AccountLayout>
  );
}

Características:

• Sidebar de navegación en desktop (izquierda, 256px)
• Sheet con navegación en mobile (accesible desde botón)
• Contenedor consistente: max-w-7xl mx-auto px-4 py-8

Páginas que usan AccountLayout:

• /account - Mi Cuenta
• /account/my-progress - Mi Progreso
• /account/my-plan - Mi Plan
• /account/profile - Perfil
• /account/settings - Configuración
• /account/referrals - Referidos

Admin Layout

El panel de administración usa DefaultLayout con sidebar fijo.

import DefaultLayout from "../layout/DefaultLayout";

<DefaultLayout user={user}>{children}</DefaultLayout>;

Grupos del Sidebar Admin:

Grupo	Rutas
CONTENT	Dashboard, Courses, Enrollments, Messages
USERS & MARKETING	Users, Promotions
SETTINGS	Settings
EXTRAS	Calendar, UI Elements

Componentes de Navegación

Breadcrumb

Migas de pan para navegación contextual.

import { Breadcrumb } from "../client/components/Breadcrumb";

<Breadcrumb
  items={[{ label: "Cursos", href: "/courses" }, { label: "Python Basics" }]}
  showHome={true} // default: true
/>;

Props:

Prop	Tipo	Default	Descripción
items	BreadcrumbItem[]	-	Array de items (label, href?)
showHome	boolean	true	Mostrar icono de Home al inicio
className	string	-	Clases CSS adicionales

PageHeader

Encabezado de página con título, subtítulo, breadcrumb y acciones.

import { PageHeader } from "../client/components/PageHeader";

<PageHeader
  title="Mi Perfil"
  subtitle="Gestiona tu información personal"
  breadcrumb={[{ label: "Cuenta", href: "/account" }, { label: "Perfil" }]}
  actions={<Button>Editar</Button>}
/>;

Navegación Mobile

Account Mobile Nav

En mobile, la navegación de cuenta se muestra en un Sheet.

// Ya incluido en AccountLayout
<Button onClick={() => setMobileNavOpen(true)}>
  <Menu /> Mi Cuenta
</Button>

Lesson Mobile Nav

En la página de aprendizaje, las lecciones se muestran en un Sheet en mobile.

// Botón flotante en LearnPage
<Button className="fixed bottom-4 right-4 lg:hidden">
  <List /> Lecciones
</Button>

Patrones de Active State

NavLink Active State

Para indicar el item activo en navegación:

import { NavLink } from "react-router-dom";
import { cn } from "../client/utils";

<NavLink
  to="/account"
  className={({ isActive }) =>
    cn(
      "flex items-center gap-3 px-3 py-2 rounded-lg",
      isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent"
    )
  }
>
  <Icon /> Label
</NavLink>;

Rutas por Sección

Rutas de Cuenta

Ruta	Página	Layout
/account	AccountPage	AccountLayout
/account/my-progress	MyProgressPage	AccountLayout
/account/my-plan	MyPlanPage	AccountLayout
/account/profile	ProfilePage	AccountLayout
/account/settings	SettingsPage	AccountLayout
/account/referrals	ReferralDashboard	AccountLayout

Rutas de Admin

Ruta	Página	Sidebar Group
/admin	AdminDashboardPage	CONTENT
/admin/courses	AdminCoursesPage	CONTENT
/admin/enrollments	AdminEnrollmentsPage	CONTENT
/admin/messages	AdminMessagesPage	CONTENT
/admin/users	AdminUsersPage	USERS & MARKETING
/admin/promotions	AdminPromotionsPage	USERS & MARKETING
/admin/settings	AdminSettingsPage	SETTINGS

Rutas de Cursos

Ruta	Página	Breadcrumb
/courses	CoursesPage	Home > Cursos
/courses/:slug	CourseDetailPage	Home > Cursos > {title}
/courses/:slug/learn	LearnPage	(top bar con back button)

Mejores Prácticas

1. Usar layouts consistentes: Todas las páginas de una sección deben usar el mismo layout.
2. Breadcrumbs en páginas de detalle: Agregar breadcrumbs cuando el usuario puede perder contexto.
3. Navegación mobile: Siempre considerar cómo se accede a la navegación en mobile.
4. Active states claros: El usuario siempre debe saber dónde está.
5. Navegación predictible: Los items del menú deben llevar a donde el usuario espera.