Loja on-line - Layout global

Agora vamos criar um arquivo de layout, ou seja, um arquivo que contém um conteúdo comum a todas as páginas da loja virtual , com cabeçalho, menu e espaço para o conteúdo das outras páginas (tag <slot />).

Para isso crie um arquivo chamado src/routes/__layout.svelte com o seguinte conteúdo:

<script>
  </script>
  <style>
    .cabecalho {
      background-color: azure;
      font-size: 3em;
      font-family: monospace;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .menu {
      font-size: 1.5em;
      font-family: monospace;
      border: 1px solid gray;
      padding: 5px;
    }
    .conteudo {
      font-size: 1em;
      font-family: monospace;
      border: 1px solid gray;
      padding: 5px;
    }
  </style>
  <div>
    <div class="cabecalho">
      <a href="/">PET TOP STORE</a>

    </div>
    <div class="menu">
      <a href="/produtos">Produtos</a> |
      Carrinho: 0
    </div>
    <div class="conteudo">
      <slot />
    </div>
  </div>

Agora a loja virtual deve ficar com um visual similar ao da imagem abaixo:

Repare que estamos utilizando algums estilos CSS bem simples somente para ter uma melhor divisão dos elementos. Claro que você pode aplicar qualquer estilo que desejar ou até usar uma biblioteca de componentes UI que achar melhor. A nossa intenção na apresentação da loja on-line é manter o código para estilização mínimo e focar mais nas funcionalidades.

Você já pode ver que temos um cabeçalho com o nome PET TOP STORE, um menu com um link para produtos (ainda não funcional) e um resumo do carrinho de compras (que implementamos na aula seguinte).

Esse conteúdo do layout será exibido em todas as páginas, sendo elas "embutidas" dentro do layout onde tem a tag <slot />.

Isso deixa você livre para criar páginas com um HTML/Javascript somente referente a página em si, e não se preocupar com o que é comum a todas pois o SvelteKit e o layout que criou toma conta disso pra você.