Para esse post iremos implementar um menu slider, com isso precisar aprender dois itens importantes o primeiro é interação com eventos e o segundo é o componente amp-sidebar, para nosso exercício iremos aplicar em nosso projeto the best caipirinha o menu atualmente se encontra sempre visível no modo desktop não temos problemas mas nas versões mobile temos os menu sempre cobrindo o nosso conteúdo, como podemos ver na imagem abaixo:
Como solução para o nosso problema iremos exibir o menu apenas quando o usuário clicar no botão menu. Para isso precisamos acompanhar o evento de click do usuário. Como fazemos isso com AMP? Com JavaScript ouvimos os eventos através do addEventListener mas com AMP iremos utilizar o atributo on.
atributo “on”
Com AMP para acompanhar eventos com tap, cliques de mouse interações com o teclado. Esses eventos nos componentes AMP são acompanhados pelo atributo on além de acompanhar os eventos podemos definir ações específicas chamadas de actions, por exemplo:
<button on="tap:menu.hide">Code language: HTML, XML (xml)No código acima temos um botão que está acompanhando a ação de tap e quando realizado o elemento com id “menu” onde será realizada a ação de “hide” para esse código funcionar precisamos de elemento com o id menu exemplo:
<div id="menu">Meu menu</div>
<button on="tap:menu.hide">Fechar o menu</button>Code language: HTML, XML (xml)Ações
No exemplo acima utilizamos a ação hide ele faz parte de um grupo de ações genéricas disponíveis para todos componentes AMP e elementos HTML que são elas:
- hide
- show
- toggleVisibility
- toggleClass
- scrollTo
- focus
Alguns componentes possuem ações e eventos específicos, por exemplo, o amp-carousel possui a ação goToSlide onde podemos exibir um slide específico e o evento slideChange que com ele podemos acompanhar esse evento e determinar alguma ação quando necessário.
amp-sidebar
Agora que temos uma introdução a eventos e ações com AMP vamos implementar esses novos recursos a nossa aplicação, primeiramente vamos adicionar o component amp-sidebar em nossa aplicação ele irá necessitar um script extra:
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>Code language: HTML, XML (xml)O componente amp-sidebar oculta o conteúdo destinado a uma acesso temporário exemplo, links de navegação, botões, menus. O componente pode ser controlado por botões.
amp-sidebar possui um comportamento bem específico:
- O conteúdo irá aparecer sempre da direita ou esquerda da página dependendo de qual valor definido pela propriedade side.
- amp-sidebar deve conter um componente HTML válido.
- layout nodisplay é obrigatório
- É recomendado que o componente amp-sidebar seja um filho direto da tag body para preservar a ordem lógica do DOM especialmente para leitores de tela.
- A ação de zoom é desabilitada para preservar o seu funcionamento.
- A largura da sidebar pode ser ajustado via CSS mas respeitando uma largura mínima de 45px.
Depois da introdução ao componente vamos a sua utilização:
<button class="recipe__header__menuBtn" on='tap:sidebar-menu.toggle'>Menu</button>
<amp-sidebar id="sidebar-menu" side="left" layout="nodisplay">
<nav class="recipe__navigation nav">
<ul class="recipe__navigation__menu">
<li class="recipe__navigation__item">
<a href="#about">About</a>
</li>
<li class="recipe__navigation__item">
<a href="#ingredients">Ingredients</a>
</li>
<li class="recipe__navigation__item">
<a href="#steps">Steps to Make It</a>
</li>
</ul>
</nav>
</amp-sidebar>
Code language: HTML, XML (xml)
No código acima é uma parte da nossa solução para ver a solução completa só acessa o repositório no github vamos fechando esse tutorial por aqui. Mais posts sobre AMP você encontra na página da categoria e caso tenha alguma dúvida só deixar um comentário.
