Layouts Dentro de Layouts

A medida que tu aplicación crece, diferentes secciones suelen necesitar su propia navegación o estructura única. La sección de servicios podría necesitar su propia navegación — filtrado por categoría, opciones de ordenamiento o una barra lateral. Las páginas de "acerca de" y "contacto" probablemente no necesiten esta interfaz adicional.

Pero el desafío es el siguiente: no quieres perder el encabezado y pie de página principales que aparecen en cada página. Solo quieres agregar interfaz específica de la sección, no reemplazar la estructura del sitio completo.

Aquí es donde los layouts anidados brillan. Te permiten superponer layouts uno sobre otro, para que puedas:

Mantener la interfaz del sitio (encabezado/pie de página) consistente en todas las páginas
Agregar interfaz específica de la sección (barra lateral, sub-navegación) solo donde se necesite
Evitar duplicar código o gestionar manualmente qué aparece y dónde

Piensa en los layouts anidados como muñecas rusas — cada capa envuelve a la siguiente, construyendo la estructura completa de la página de afuera hacia adentro.

Ejemplo del Mundo Real

Imagina que estás navegando en una tienda en línea:

Cada página tiene el mismo encabezado del sitio (logo, carrito, menú de cuenta)
Las páginas de productos tienen filtros de categoría en una barra lateral
Las páginas de cuenta tienen navegación diferente (pedidos, configuración, lista de deseos)
Las páginas de pago tienen un encabezado simplificado con solo información esencial

Cada sección necesita su propio layout, pero todas comparten la estructura base del sitio. Los layouts anidados hacen que este patrón sea natural y mantenible.

Lo Que Aprenderás

Crear un layout específico para una sección de rutas
Entender cómo los layouts anidados heredan de los layouts padre
Construir sub-navegación para el área de servicios

Cómo Funciona el Anidamiento

Los layouts se aplican en cascada. Un layout en una subcarpeta envuelve las páginas de esa carpeta, pero también está envuelto por cualquier layout padre:

src/routes/
├── +layout.svelte           ← Root layout (header/footer)
└── services/
    ├── +layout.svelte       ← Services layout (adds sub-nav)
    └── +page.svelte         ← Services page

Cuando visitas /services:

Se renderiza el layout raíz (encabezado + pie de página)
Se renderiza el layout de servicios dentro del {@render children()} del layout raíz
Se renderiza la página de servicios dentro del {@render children()} del layout de servicios

┌─────────────────────────────────────┐
│  Root Layout (header)               │
│  ┌───────────────────────────────┐  │
│  │  Services Layout (sub-nav)    │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │  Services Page          │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
│  Root Layout (footer)               │
└─────────────────────────────────────┘

Crear el Layout de Servicios

Ahora es momento de construir el layout específico para servicios. Este layout agregará una barra lateral de navegación por categorías a todas las páginas bajo la ruta /services, mientras sigue heredando el encabezado y pie de página del layout raíz.

Qué Proporcionará Este Layout

El layout de servicios creará una estructura de dos columnas:

Columna izquierda: Una barra lateral persistente con enlaces de categorías
Columna derecha: El contenido de la página (lista de servicios o detalles de un servicio individual)

Esta barra lateral aparecerá tanto en /services (la lista) como en /services/[slug] (las páginas de servicios individuales), brindando a los usuarios una forma consistente de filtrar o navegar por categoría sin importar dónde se encuentren en la sección de servicios.

Entendiendo la Estructura del Layout

Antes de escribir el código, analicemos qué necesita este layout:

Desestructuración de props: Aceptar el prop children de SvelteKit
Navegación en la barra lateral: Una lista de enlaces de categorías para filtrar
Área de contenido: Un contenedor que renderiza el contenido de la página hija
Layout Flexbox: CSS para posicionar la barra lateral y el contenido uno al lado del otro
Estilos responsivos: Hacerlo verse limpio y profesional

Construyendo el Layout

Crea +layout.svelte dentro de la carpeta services:

<!-- filename: src/routes/services/+layout.svelte -->
<script>
	let { children } = $props()
</script>

<div class="services-layout">
	<aside class="services-nav">
		<h3>Categories</h3>
		<ul>
			<li><a href="/services">All Services</a></li>
			<li><a href="/services?category=lawn-care">Lawn Care</a></li>
			<li><a href="/services?category=tree-care">Tree Care</a></li>
			<li><a href="/services?category=consultation">Consultation</a></li>
			<li><a href="/services?category=cleaning">Cleaning</a></li>
		</ul>
	</aside>

	<div class="services-content">
		{@render children()}
	</div>
</div>

<style>
	.services-layout {
		display: flex;
		gap: 2rem;
	}

	.services-nav {
		width: 200px;
		flex-shrink: 0;
	}

	.services-nav h3 {
		margin: 0 0 1rem 0;
		font-size: 1rem;
		color: #666;
	}

	.services-nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.services-nav li {
		margin: 0.5rem 0;
	}

	.services-nav a {
		color: #333;
		text-decoration: none;
	}

	.services-nav a:hover {
		color: #007bff;
	}

	.services-content {
		flex: 1;
	}
</style>

Esto crea un layout de dos columnas: barra lateral de categorías a la izquierda, contenido de la página a la derecha.

Probar el Anidamiento

Visita /services. Deberías ver:

Encabezado del sitio (del layout raíz)
Barra lateral de categorías (del layout de servicios)
Lista de servicios (de la página de servicios)
Pie de página del sitio (del layout raíz)

Ahora visita /services/lawn-mowing. La misma estructura aplica:

Encabezado del sitio
Barra lateral de categorías
Página de detalle del servicio
Pie de página del sitio

El layout de servicios envuelve tanto la página de lista como las páginas de detalle.

La Estructura de Tu Proyecto

src/routes/
├── +layout.svelte              ← Root (header, main, footer)
├── +page.svelte                ← Homepage
├── services/
│   ├── +layout.svelte          ← Services (sidebar) [NEW]
│   ├── +page.svelte            ← Services list
│   └── [slug]/
│       ├── +page.js
│       └── +page.svelte        ← Service detail
├── about/
│   └── +page.svelte            ← About (no extra layout)
└── contact/
    └── +page.svelte            ← Contact (no extra layout)

Las páginas en about/ y contact/ solo obtienen el layout raíz. Las páginas en services/ obtienen tanto el layout raíz como el layout de servicios.

La Cadena de Herencia

Cada layout anidado también debe recibir y renderizar children:

<!-- Every layout needs this pattern -->
<script>
	let { children } = $props()
</script>

<!-- Your layout content -->
{@render children()}
<!-- More layout content if needed -->

El contenido pasado como children a un layout anidado es:

Otro layout anidado (que renderizará sus propios hijos)
El componente de página actual

SvelteKit maneja la cadena automáticamente.

Cuándo Usar Layouts Anidados

Los layouts anidados son útiles para:

Navegación de sección — Barra lateral o pestañas dentro de una sección
Estructuras de página diferentes — Dashboard con barra lateral vs páginas de marketing sin ella
Carga de datos compartida — Cargar datos del usuario una vez para todas las páginas de cuenta
Estilos con alcance limitado — Aplicar estilos solo a ciertas rutas

No necesitas layouts anidados para cada carpeta. Solo créalos cuando una sección genuinamente necesite un envoltorio diferente.

Errores Comunes

Olvidar Children en el Layout Anidado

<!-- ❌ Page content disappears -->
<script>
	let { children } = $props()
</script>

<aside class="sidebar">Navigation</aside>
<!-- Missing: {@render children()} -->

Todo layout debe renderizar su children, o el contenido debajo de él en la cadena no aparecerá.

Crear Layouts Vacíos

<!-- ❌ Pointless — adds nothing -->
<script>
	let { children } = $props()
</script>

{@render children()}

Si un layout solo pasa los hijos sin agregar nada, elimínalo. SvelteKit no requiere layouts en cada carpeta.

Resumen

Los layouts anidados te permiten agregar interfaz específica de la sección mientras heredas los layouts padre. La sección de servicios ahora tiene una barra lateral de categorías que aparece en todas las páginas de servicios, mientras sigue manteniendo el encabezado y pie de página del sitio.

Conclusiones clave:

Los layouts en subcarpetas se anidan dentro de los layouts padre
Cada layout debe recibir y renderizar children
Solo crea layouts anidados cuando las secciones necesiten un envoltorio único

¡Módulo Completo! 🎉

Has terminado el Módulo 3: Layouts. BookIt ahora tiene:

Layout raíz con encabezado y pie de página en todas las páginas
Layout de servicios con barra lateral de categorías
Código limpio y DRY — navegación definida una sola vez
Estructura de anidamiento adecuada

Lo que has aprendido:

Por qué repetir código es problemático (principio DRY)
Crear archivos +layout.svelte
El snippet children y {@render children()}
Construir encabezados y pies de página
Anidar layouts para interfaz específica de sección

Próximos Pasos

Continúa con el Módulo 4: Bases de la Reactividad (¡ya completo!) donde construirás un formulario de reservas interactivo con vista previa en tiempo real usando $state.