Envie seu primeiro script ao navegador

Vamos adicionar um menu hambúrguer para abrir e fechar seus links em tamnhos de tela móveis, que necessita de interatividade no lado do cliente!

Se prepare para...

Criar um componente de menu hambúrguer
Escrever um <script> para permitir visitantes do site abrirem e fecharem o menu de navegação
Mover seu JavaScript para seu arquivo .js

Construa um componente Hambúrguer

Crie um componente <Hamburguer /> para abrir e fechar sua navegação móvel.

Crie um arquivo chamado Hamburguer.astro em src/components/
Copie o seguinte código em seu componente. Isso irá representar o seu menu “hambúrguer” de 3-linhas para abrir e fechar seus links de navegação em dispositivos móveis. (Você vai adicionar os novos estilos CSS ao global.css posteriormente.)
src/components/Hamburguer.astro
```
---
---
<div class="hamburguer">
  <span class="line"></span>
  <span class="line"></span>
  <span class="line"></span>
</div>
```

Coloque esse novo componente <Hamburguer /> logo antes do seu componente <Navigation /> em Header.astro.

Me mostre o código!

---
import Hamburguer from './Hamburguer.astro';
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Hamburguer />
    <Navigation />
  </nav>
</header>

Adicione os seguintes estilos ao seu componente Hambúrguer:

/* estilos da navegação */
.hamburguer {
  padding-right: 20px;
  cursor: pointer;
}

.hamburguer .line {
  display: block;
  width: 40px;
  height: 5px;
  margin-bottom: 10px;
  background-color: #ff9776;
}

.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, 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;
  }

  .hamburguer {
    display: none;
  }
}

Escreva sua primeira tag de script

Seu cabeçalho ainda não é interativo pois ele não consegue responder as interações do usuário, como clicar no menu hambúrguer para mostrar ou esconder os links de navegação.

Adicionar uma tag <script> fornece JavaScript no lado do cliente para “escutar” por um evento do usuário e então responder de acordo.

Adicione a seguinte tag <script> em index.astro, logo antes da tag de fechamento </body>.

  <Footer />
  <script>
    document.querySelector('.hamburguer').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });
  </script>
</body>

Verifique sua pré-visualização do navegador novamente em vários tamanhos, e verifique que você tem um menu de navegação funcional que é tanto responsivo ao tamanho da tela quanto responde a interação do usuário na página.

Importando um arquivo `.js`

Ao invés de escrever seu JavaScript diretamente em cada página, você pode mover os conteúdos da sua tag <script> para seu próprio arquivo .js em seu projeto.

Crie src/scripts/menu.js (você terá que criar uma nova pasta /scripts/) e mova seu JavaScript para ela.

document.querySelector('.hamburguer').addEventListener('click', () => {
  document.querySelector('.nav-links').classList.toggle('expanded');
});

Substitua os conteúdos da tag <script> em index.astro com a seguinte importação de arquivo:

  <Footer />
  <script>
    document.querySelector('.hamburguer').addEventListener('click', () => {
      document.querySelector('.nav-links').classList.toggle('expanded');
    });

    import "../scripts/menu.js";
  </script>
</body>

Verifique a pré-visualização do seu navegador novamente em um tamanho de tela menor e verifique que o menu hambúrguer ainda abre e fecha seus links de navegação.
Adicione o mesmo <script> por importação para suas outras duas páginas, about.astro e blog.astro e verifique que você tem um cabeçalho responsivo e interativo em cada página.
src/pages/about.astro & src/pages/blog.astro
```
  <Footer />
  <script>
    import "../scripts/menu.js";
  </script>
</body>
```

Teste seu conhecimento

Quando o Astro executa qualquer JavaScript escrito no frontmatter de um componente?
1. Astro nunca executa JavaScript
2. Em tempo de build
3. Quando um visitante clica em um botão
Opcionalmente, Astro pode enviar JavaScript para o navegador para permitir:
1. usuários a clicarem links da página
2. tempos de carregamento mais rápidos
3. interatividade no lado do cliente
O JavaScript no lado do cliente será enviado ao navegador do usuário quando ele é escrito ou importado:
1. em tags <script>
2. entre as cercas de código de um arquivo .astro
3. em global.css

Checklist

Eu posso adicionar interatividade no lado do cliente com JavaScript em uma tag <script>.
Eu posso importar um arquivo .js em uma tag <script>.

Recursos

Scripts no lado do cliente no Astro