Criar menu lateral com React e Tailwind

Um menu lateral expansivo é um recurso muito comum em sites na atualidade. Além de garantir uma melhor usabilidade do espaço visual disponível, a sua utilização proporciona de forma organizada o acesso a listas de informações que só aparecerão na tela quando o usuário achar que é necessário. Neste artigo o nosso objetivo será criar um menu com estas características, utilizando para cumprir esta tarefa o React como biblioteca javascript de desenvolvimento e o Tailwind CSS como ferramenta de estilização. Vamos lá?

Primeiramente, o que é o React?

O React é uma biblioteca JavaScript de código aberto e utilizado por diversas empresas gigantes, como o Facebook, a Netflix o Instagram, etc. Focado em criar interfaces para o usuário de maneira muito mais prática do que utilizando o JavaScript puro, o React foi ganhando mais e mais espaço por ser de fácil assimilação, compreensão e adaptação.

E o que é o Tailwind CSS?

O Tailwind é um framework criado com o objetivo de otimizar o uso do CSS. Ao invés da estilização ser feita por tags que possuem diversos atributos definidos em um arquivo importado com extensão “.css”, sua utilização exclui essa necessidade já que cada atributo (como por exemplo width, height, display ou position) possui uma classe com um nome pré-definido pelo Tailwind e está disponibilizado em sua documentação.

Focado no desenvolvimento mobile-first, todo o processo de estilização é acelerado e otimizado com o Tailwind, que além de ser auto intuitivo possui uma documentação de fácil aprendizado e rápida busca: basta colocar o nome do atributo (como por exemplo font-size, font-weight, ou text-decoration) que é disponibilizado todo um passo a passo de como o utilizar com a biblioteca.

Primeiros passos com React e Tailwind

A primeira coisa que faremos será criar a aplicação que iremos implementar o menu expansivo. Para isto, vamos criar um projeto React e instalar nele o Tailwind. Se tudo der certo, ao reproduzir o código a seguir em seu terminal, será aberto no browser uma página com o símbolo do React em movimento:

npx create-react-app menu

cd menu

npm install

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

npm start

OBS - Foi utilizado o npm como ferramenta de gerenciamento de pacotes, mas sinta-se à vontade para utilizar o que lhe for mais confortável.

Uma vez instalado o Tailwind, precisamos configurá-lo. Primeiro, substitua o conteúdo do arquivo “tailwind.config.js” que foi criado durante a instalação do framework pelo código que está disposto logo a seguir. Esta implementação fará com que o Tailwind seja utilizado em todos os arquivos do projeto que possuam as extensões js, jsx, ts e tsx:

@type {import('tailwindcss').Config}

module.exports = {

content: [

"./src/**/*.{js,jsx,ts,tsx}",

],

theme: {

extend: {},

},

plugins: [],

}

Por fim, no arquivo css do seu projeto, substitua todo o conteúdo existente nele pelas seguintes sentenças (no nosso caso, faremos este processo no arquivo App.css):

@tailwind base;

@tailwind components;

@tailwind utilities;

Você pode testar se sua aplicação funcionou criando uma classe bg-red-500 para o container principal do projeto. Se o plano de fundo adquirir a cor vermelha, quer dizer que deu tudo certo e o Tailwind foi instalado e implementado corretamente. Caso contrário, refaça todos os passos descritos anteriormente à risca. Se o problema persistir, veja o passo a passo diretamente no site do Tailwind. Não se esqueça de apagar a classe bg-red-500 após constatar que o uso da biblioteca funcionou, ok?

Implementando o Menu e criando um conteúdo

No componente App (componente raiz do nosso projeto) iremos criar um novo componente que será o nosso menu lateral expansivo. Também será criada uma imagem que servirá como um conteúdo da página (o uso de apenas uma imagem como conteúdo é proposital: quanto menos complexidades desnecessárias, melhor para o entendimento, concorda?).

Note que a imagem possui as seguintes classes utilizadas para alterar o estilo via Tailwind:

• h-screen - define a altura (height) igual a altura total do display;
• w-full - define a largura (width) igual a 100%;
• object-cover - Define que a imagem irá se adaptar ao tamanho disponível para ela sem ser distorcida;
• absolute - Cria um posicionamento absoluto para que a imagem fique por trás do Menu que criaremos (caso não tivesse esta configuração, ela ficaria abaixo do Menu).
  

OBS - Ao longo deste artigo evitaremos descrever novamente as mesmas classes utilizadas pelo Tailwind que já foram explicadas até então, para evitar trechos repetitivos.

Agora é o momento de criar o componente que chamaremos de Menu. Ele será construído dentro de uma pasta components para fins de organização (nesta página armazenaremos todos os componentes que utilizaremos ao longo deste projeto). Quanto ao Menu, precisamos implementar dentro dele três funcionalidades essenciais para cumprir o que estamos buscando fazer:

• Um componente que será o ícone que utilizaremos para exibir e ocultar o menu;
• Um estado (utilizaremos o hook useState para isto) que armazenará a informação de que o menu estará disponível para a exibição na tela ou não;
• Um componente que possuirá uma lista com todos os dados existentes no menu, que serão exibidos de acordo com o que estiver armazenado no estado criado.

Perceba na figura 2 que passamos como propriedade para os componentes Icone e Nav (criaremos ambos logo em seguida, não se preocupe com isso) informações importantes referentes ao estado da aplicação.

Para Icone foi repassado tanto o valor armazenado do estado visivel quanto o método de alteração deste estado (setVisivel). Ambos são necessários porque, sempre ao clicar no ícone, iremos utilizar a função de alteração do estado para mudar seu valor atual para o oposto do que ele estava anteriormente (se era true, recebe o valor false; se era false, recebe o valor true).

Já para Nav, apenas o valor do estado é encaminhado, pois utilizaremos ele para permitir ou não a visualização da lista de opções. Perceba também que, na linha 8 da figura 2, há uma classe absolute z-20 w-full no elemento Nav. Novamente ela está aí porque queremos que o Menu fique à frente da imagem que criamos no componente App, com posicionamento absoluto e largura de 100%.

Construiremos o componente Icone de forma que, ao ser clicado, inverta o valor do estado visivel que define se o menu será exibido ou não. Desta forma, caso ele esteja visível e clicamos em Icone, as informações do menu serão ocultas. De semelhante modo, caso o menu esteja oculto e seja clicado em Icone, o mesmo se torna visível. Para isto criaremos um evento onClick no container principal do componente.

A div principal (figura 3, linha 4) possui as seguintes classes do Tailwind:

• flex - define o display do elemento como flex;
• flex-col - configura o display flex de forma que os seus elementos “filhos” sejam organizados verticalmente como colunas;
• fixed top-0 right-0 - Como queremos que o componente Icone esteja sempre visível no canto superior direito da tela, utilizamos estas classes para definir o posicionamento como fixo e a posição em relação ao ponto superior e direito da tela;
• z-40 - Define um z-index de 40 para o elemento;
• p-5 - Cria um espaçamento interno (padding) de 1.25 rem (ou 20px) para o elemento.
  

As divs que foram criadas dentro da div principal possuem seis classes em comum:

• h-1 - altura (height) de 0.25rem (4px);
• w-8 - largura (width) de 2rem(32px);
• mb-1 - margem inferior (margin-bottom) de 0.25rem (4px);
• bg-white - cor de fundo (background-color) branca;
• transition - habilita transições para o elemento;
• duration-500 - define a duração de 500ms para a transição.
  

Cada container “filho” possui uma verificação baseada no estado visivel. A primeira rotaciona em 45deg e desloca no eixo Y 0.5rem caso o estado possua o valor true. A segunda rotaciona -45deg sob as mesmas condições e a terceira é oculta da tela caso o estado tiver o valor true. Estas três implementações juntas fazem o ícone que é composto por três barras orientadas verticalmente se transforme em um “X” ao ser clicado.

OBS - Foi necessário criar uma classe “rotate-_45” que fosse responsável por rotacionar a segunda div “filha” para “-45deg”. Para isto, basta ir até o arquivo tailwind.config.js e criar a seguinte extensão (linhas 8 e 9 e 10):

Por fim, vamos criar o componente Nav que terá os dados que exibiremos ou não, de acordo com a interação do usuário. Iremos criar uma condição que garanta que a lista só aparecerá se o estado visivel possuir o valor true.

Vamos analisar as classes que o elemento ul possui:

• transition-width - cria uma transição para a alteração de valores do atributo width (necessário criar esta extensão no arquivo tailwind.config.js;
• font-bold - define a espessura (font-weight) do texto como 700;
• pt-20 - espaçamento interno superior (padding-top) de 5 rem (80px);
• bg-half-transparent - a cor de fundo terá será preta e parcialmente translúcida (também deverá ser criada no documento tailwind.config.js);
• justify-center items-center - Alinha verticalmente e horizontalmente o elemento ao centro.
  

O elemento também possui uma verificação baseada no estado: enquanto o estado possuir o valor true e o elemento ul uma largura de 640px (sm), o menu terá uma largura de 7 rem (w-48). Caso tenha uma largura abaixo disto, ocupará toda a tela (w-full). Por fim, caso o estado possua valor false, terá largura 0 e não será exibido na tela (w-0). Seguem as extensões necessárias no arquivo tailwind.config.js:

Para finalizar as explicações das classes utilizadas com o Tailwind, temos os elementos li (mais uma vez, abordaremos apenas a classes que ainda não foram explicadas até aqui para não nos prolongarmos muito):

• text-white - cor da fonte do texto(color) branca;
• hover:text-salmon - Caso o usuário mova o mouse para o elemento, a cor do texto muda para a cor salmon que criamos no arquivo tailwind.config.js;
• sm:w-32 - Largura (width) igual a 8rem (128px) caso a largura total da tela seja de 640px(sm);
• m-1 - margem (margin) de 0.25rem (4px).

Caso o estado tenha o valor true, os elementos li são exibidos em tela. Caso contrário, ficam ocultos.

Considerações finais

Esta foi uma demonstração básica de como utilizar o React e o Tailwind para fazer uma funcionalidade muito comum de ser requisitada quando estamos atuando como desenvolvedores frontend. Explicamos ao longo do artigo as classes que usamos do Tailwind, mas existem tantas e tantas que sem a documentação estaríamos perdidos. Então é só andar com ela debaixo do braço que vai dar tudo certo.

Já teve uma experiência usando React e Tailwind? Conta pra gente nos comentários do post!