Construa você mesmo - Cabeçalho

Já que o seu site será visto em diferentes dispositivos, é hora de criar uma navegação entre páginas que responde a múltiplos tamanhos de tela!

Se prepare para...

Criar um Cabeçalho para o seu site que contém o componente de Navegação
Fazer o componente de Navegação responsivo

Tente você mesmo - Construa um novo componente de Cabeçalho

Crie um novo componente de Cabeçalho. Importe e utilize seu componente Navigation.astro existente dentro de um elemento <nav> que está dentro de um elemento <header>.
Me mostre o código!

Crie um arquivo chamado Header.astro em src/components/
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

Tente você mesmo - Atualize suas páginas

Em cada página, substitua seu componente <Navigation/> existente com o seu novo cabeçalho.

Me mostre o código!

---
import Navigation from '../components/Navigation.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Página Inicial";
---
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

Verifique a pré-visualização do seu navegador e verifique que o seu cabeçalho é mostrado em todas as páginas. Ele não se parecerá diferente ainda, mas se você inspecionar sua pré-visualização utilizando ferramentas de desenvolvimento, você irá ver que agora você tem elementos como <header> e <nav> entre os seus links de navegação.

Adicione estilos responsivos

Atualize Navigation.astro com a classe CSS para controlar seus links de navegação. Envolva os links de navegação existentes em uma <div> com a classe nav-links.
```
---
---
<div class="nav-links">
  <a href="/">Início</a>
  <a href="/about">Sobre</a>
  <a href="/blog">Blog</a>
</div>
```

Copie os estilos CSS abaixo em global.css. Esses estilos:

Estilizam e posicionam os links de navegação para dispositivos móveis
Incluem uma classe expanded que pode ser alternada para mostrar ou esconder os links em dispositivos móveis
Utilizam uma @media query para definir diferentes estilos em tamanhos de tela maiores

:::tip[Design mobile-first]Comece definindo o que deve acontecer em tamanhos de tela menores primeiro! Tamanhos de tela menores demandam layouts mais simples. E então, ajuste seus estilos para acomodarem dispositivos maiores. Se você projetar para os casos mais complicados primeiro, você terá que trabalhar para tentar torná-lo simples novamente.:::

html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

/* estilos da navegação */

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  background-color: #ff9776;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: #ff9776;
}

.expanded {
  display: unset;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }

}

Redimensione sua tela e veja os diferentes estilos sendo aplicados em diferentes larguras de tela. Seu cabeçalho agora é responsivo ao tamanho da tela através do uso de @media queries.

Checklist

Eu posso utilizar CSS para adicionar elementos responsivos ao meu site.

Recursos

Contribua Comunidade Sponsor