Navegação Que Permanece

Toda página precisa de navegação. Com layouts, você a constrói uma vez e ela aparece automaticamente em todos os lugares. Vamos criar o cabeçalho do BookIt.

O Que Você Vai Aprender

Adicionar um cabeçalho com navegação ao layout
Criar o link de logo/marca do site
Construir links de navegação para todas as páginas

Construindo o Cabeçalho

Atualize seu layout para incluir um cabeçalho adequado:

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

<div class="app">
  <header>
    <nav>
      <a href="/" class="logo">BookIt</a>
      
      <ul>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    {@render children()}
  </main>
</div>

Visite qualquer página. A navegação aparece no topo. Clique nos links — você se move entre as páginas, mas o cabeçalho permanece consistente.

Entendendo a Estrutura

O cabeçalho contém:

Link de logo/marca — Link para a página inicial, identifica o site:

<a href="/" class="logo">BookIt</a>

Lista de navegação — Links para as seções principais:

<ul>
  <li><a href="/services">Services</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Usar <ul> com <li> é semanticamente correto para listas de navegação. Leitores de tela entendem isso como um grupo de links relacionados.

Adicionando Estilos Básicos

Vamos adicionar estilos mínimos para tornar a navegação utilizável. Adicione um bloco <style> ao seu layout:

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

<div class="app">
  <header>
    <nav>
      <a href="/" class="logo">BookIt</a>
      
      <ul>
        <li><a href="/services">Services</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    {@render children()}
  </main>
</div>

<style>
  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
  }
  
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .logo {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  
  ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  li a {
    text-decoration: none;
    color: #666;
  }
  
  li a:hover {
    color: #333;
  }
  
  main {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
</style>

Agora você tem:

Logo à esquerda, links à direita
Fundo e borda sutis
Estados de hover nos links
Conteúdo centralizado com largura máxima

Testando a Navegação

Clique em todas as páginas:

Clique no logo "BookIt" → Página inicial
Clique em "Services" → Lista de serviços
Clique em um serviço → Detalhe do serviço
Clique em "About" → Página Sobre
Clique em "Contact" → Página de Contato

O cabeçalho permanece constante. Apenas o conteúdo principal muda. Este é o poder dos layouts.

Uma Mudança, Todas as Páginas

Tente modificar o cabeçalho. Adicione "Pricing" à navegação:

<ul>
  <li><a href="/services">Services</a></li>
  <li><a href="/pricing">Pricing</a></li>  <!-- New! -->
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Salve o arquivo. Visite todas as páginas — todas têm o novo link. Você alterou um único arquivo, mas a atualização se propagou para todos os lugares. Sem mais precisar procurar em múltiplos arquivos.

(Remova o link de Pricing por enquanto, já que ainda não temos essa página.)

HTML Semântico Importa

Usamos os elementos <header> e <nav> intencionalmente:

<header>
  <nav>
    <!-- links -->
  </nav>
</header>

Esses elementos semânticos informam aos navegadores e leitores de tela "este é o cabeçalho do site" e "esta é a navegação." Isso melhora:

Acessibilidade — leitores de tela anunciam "navegação" ao entrar nesta seção
SEO — mecanismos de busca entendem a estrutura do seu site
Manutenibilidade — desenvolvedores entendem instantaneamente o propósito do código

Erros Comuns

Esquecer o Link Home no Logo

<!-- ❌ Logo doesn't go anywhere -->
<span class="logo">BookIt</span>

<!-- ✅ Logo links to home -->
<a href="/" class="logo">BookIt</a>

Os usuários esperam que clicar no logo/marca os leve para a página inicial. Sempre o torne um link.

Estilos Inline em Vez de CSS

<!-- ❌ Hard to maintain -->
<nav style="display: flex; justify-content: space-between; padding: 1rem;">

<!-- ✅ Use style block -->
<nav>
  <!-- content -->
</nav>

<style>
  nav {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
  }
</style>

Mantenha os estilos no bloco <style> para facilitar a manutenção e o escopo.

Resumo

O BookIt agora tem um cabeçalho de navegação consistente em todas as páginas. Ele é definido uma vez no layout e aparece automaticamente em todos os lugares. As alterações se propagam instantaneamente.

Principais conclusões:

O cabeçalho vai em +layout.svelte, acima de {@render children()}
Use elementos semânticos (<header>, <nav>) para acessibilidade
Uma mudança em um arquivo atualiza a navegação em todo o site

Próximos Passos

O topo está pronto. Continue com Adicionar um Rodapé ao Site para completar o layout com conteúdo de rodapé consistente.