Layouts Dentro de Layouts

À medida que sua aplicação cresce, diferentes seções frequentemente precisam de sua própria navegação ou estrutura exclusiva. A seção de serviços pode precisar de sua própria navegação — filtragem por categoria, opções de ordenação ou uma barra lateral. As páginas "sobre" e "contato" provavelmente não precisam dessa interface adicional.

Mas aqui está o desafio: você não quer perder o cabeçalho e rodapé principais que aparecem em todas as páginas. Você simplesmente quer adicionar uma interface específica da seção, não substituir a estrutura global do site.

É aqui que os layouts aninhados brilham. Eles permitem que você sobreponha layouts uns sobre os outros, para que você possa:

Manter a interface global do site (cabeçalho/rodapé) consistente em todas as páginas
Adicionar interface específica da seção (barra lateral, sub-nav) apenas onde necessário
Evitar duplicação de código ou gerenciar manualmente o que aparece onde

Pense nos layouts aninhados como bonecas russas — cada camada envolve a próxima, construindo a estrutura completa da página de fora para dentro.

Exemplo do Mundo Real

Imagine que você está navegando em uma loja online:

Todas as páginas têm o mesmo cabeçalho do site (logo, carrinho, menu de conta)
Páginas de produto têm filtros de categoria em uma barra lateral
Páginas de conta têm navegação diferente (pedidos, configurações, lista de desejos)
Páginas de checkout têm um cabeçalho simplificado com apenas informações essenciais

Cada seção precisa de seu próprio layout, mas todas compartilham a estrutura base do site. Layouts aninhados tornam esse padrão natural e fácil de manter.

O Que Você Vai Aprender

Criar um layout específico para uma seção de rota
Entender como layouts aninhados herdam dos layouts pai
Construir sub-navegação para a área de serviços

Como o Aninhamento Funciona

Layouts são aplicados em cascata. Um layout em uma subpasta envolve as páginas dessa pasta, mas também é envolvido por quaisquer layouts pai:

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

Quando você visita /services:

O layout raiz é renderizado (cabeçalho + rodapé)
O layout de serviços é renderizado dentro do {@render children()} do layout raiz
A página de serviços é renderizada dentro do {@render children()} do layout de serviços

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

Crie o Layout de Serviços

Agora é hora de construir o layout específico de serviços. Este layout adicionará uma barra lateral de navegação por categoria a todas as páginas sob a rota /services, enquanto ainda herda o cabeçalho e rodapé do layout raiz.

O Que Este Layout Vai Fornecer

O layout de serviços criará uma estrutura de duas colunas:

Coluna esquerda: Uma barra lateral persistente com links de categoria
Coluna direita: O conteúdo da página (lista de serviços ou detalhes de um serviço individual)

Esta barra lateral aparecerá tanto em /services (a lista) quanto em /services/[slug] (páginas de serviços individuais), dando aos usuários uma maneira consistente de filtrar ou navegar por categoria independentemente de onde estejam na seção de serviços.

Entendendo a Estrutura do Layout

Antes de escrever o código, vamos analisar o que este layout precisa:

Desestruturação de props: Aceitar a prop children do SvelteKit
Navegação na barra lateral: Uma lista de links de categoria para filtragem
Área de conteúdo: Um wrapper que renderiza o conteúdo da página filha
Layout flexbox: CSS para posicionar a barra lateral e o conteúdo lado a lado
Estilização responsiva: Tornar tudo limpo e profissional

Construindo o Layout

Crie +layout.svelte dentro da pasta 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>

Isso cria um layout de duas colunas: barra lateral de categorias à esquerda, conteúdo da página à direita.

Teste o Aninhamento

Visite /services. Você deverá ver:

Cabeçalho do site (do layout raiz)
Barra lateral de categorias (do layout de serviços)
Lista de serviços (da página de serviços)
Rodapé do site (do layout raiz)

Agora visite /services/lawn-mowing. A mesma estrutura se aplica:

Cabeçalho do site
Barra lateral de categorias
Página de detalhes do serviço
Rodapé do site

O layout de serviços envolve tanto a página de lista quanto as páginas de detalhes.

Estrutura do Seu Projeto

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)

Páginas em about/ e contact/ recebem apenas o layout raiz. Páginas em services/ recebem tanto o layout raiz quanto o layout de serviços.

A Cadeia de Herança

Todo layout aninhado também deve receber e renderizar children:

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

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

O conteúdo passado como children para um layout aninhado é:

Outro layout aninhado (que renderizará seus próprios filhos)
O componente de página propriamente dito

O SvelteKit gerencia a cadeia automaticamente.

Quando Usar Layouts Aninhados

Layouts aninhados são úteis para:

Navegação de seção — Barra lateral ou abas dentro de uma seção
Estruturas de página diferentes — Dashboard com barra lateral versus páginas de marketing sem
Carregamento de dados compartilhado — Carregar dados do usuário uma vez para todas as páginas de conta
Estilização com escopo — Aplicar estilos apenas a certas rotas

Você não precisa de layouts aninhados para todas as pastas. Crie-os apenas quando uma seção genuinamente precisar de um envolvimento diferente.

Erros Comuns

Esquecer Children no Layout Aninhado

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

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

Todo layout deve renderizar seus children, caso contrário o conteúdo abaixo dele na cadeia não aparecerá.

Criando Layouts Vazios

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

{@render children()}

Se um layout apenas repassa os filhos sem nenhuma adição, delete-o. O SvelteKit não exige layouts em todas as pastas.

Resumo

Layouts aninhados permitem que você adicione interface específica da seção enquanto herda layouts pai. A seção de serviços agora tem uma barra lateral de categorias que aparece em todas as páginas de serviços, enquanto mantém o cabeçalho e rodapé globais do site.

Principais conclusões:

Layouts em subpastas se aninham dentro dos layouts pai
Cada layout deve receber e renderizar children
Crie layouts aninhados apenas quando seções precisarem de um envolvimento exclusivo

Módulo Concluído! 🎉

Você terminou o Módulo 3: Layouts. O BookIt agora tem:

Layout raiz com cabeçalho e rodapé em todas as páginas
Layout de serviços com barra lateral de categorias
Código limpo e DRY — navegação definida uma única vez
Estrutura de aninhamento adequada

O que você aprendeu:

Por que repetir código é problemático (princípio DRY)
Criação de arquivos +layout.svelte
O snippet children e o {@render children()}
Construção de cabeçalhos e rodapés
Aninhamento de layouts para interface específica de seção

Próximos Passos

Continue com o Módulo 4: Fundamentos de Reatividade (já concluído!) onde você construirá um formulário de reserva interativo com visualização ao vivo usando $state.