DEV Community: Carlos Eduardo Ramos

Receita de Menu Hambúrguer

Carlos Eduardo Ramos — Thu, 25 May 2023 12:26:58 +0000

Sumário

A importância dos hambúrgueres

Requisitos e características do hambúrguer que iremos cozinhar

Ingredientes

Mise en place: Preparando o HTML

Ligando o forno: configurando o CSS

Misturando com JS: dando vida ao botão

Exemplo prático

A importância dos hambúrgueres

A TIC Domicílios é uma pesquisa realizada anualmente desde 2005, com o objetivo de medir a posse, o uso, o acesso e os hábitos da população brasileira em relação às Tecnologias da Informação e Comunicação.

Em 2022, o resultado da pesquisa constatou que 92 milhões de brasileiros acessam a internet apenas pelo celular.
Além disso o celular é o meio mais utilizado para acessar a internet (99% das pessoas da amostra o utilizam).

Esses números nos chamam a atenção para a importância da responsividade.

Um problema comum ao desenvolver sites responsivos é lidar com o tamanho reduzido das telas de celulares.

Na maioria das vezes o menu de navegação, que é um dos elementos mais comuns em sites, possui uma solução em comum que é o uso do chamado "menu hambúrguer".

Existem diversas formas de se fazer um menu hambúrguer (algumas mais simples, outras um pouco mais trabalhosas):

Com/sem animações;
Usando uma imagens ou elementos html para criar o visual do botão.
Usando/não usando JavaScript;
Usando 1 botão (abrir/fechar) ou 2 botões diferentes (abrir e fechar);

Por ser uma dúvida muito recorrente de iniciantes, veremos a seguir uma introdução de como criar esse componente de uma forma muito simples.

Requisitos e características do hambúrguer que iremos cozinhar

Nosso menu terá 03 links (Home, Produtos e Contato);
Utilizaremos apenas 1 botão, que será responsável pela abertura e fechamento do menu hambúrguer;
Ao abrir o menu, o ícone do botão será alterado para um ícone de fechar e ao fechá-lo, irá retornar para o ícone padrão de um menu hambúrguer;
Não serão usadas animações.

Ingredientes:

HTML;
CSS;
Javascript.

Obs: Se você ainda não sabe JavaScript, não precisa se assustar pois além de ser usado o mínimo possível, ainda será explicado passo-a-passo!

Mise en place: Preparando o HTML

Para tornar mais simples a visualização do código, nosso cabeçalho <header> irá conter apenas o botão <button> responsável por exibir/esconder o menu e o menu de navegação <nav> que contém uma lista não ordenada <ul> com 03 itens de lista <li> que possuem uma âncora/link em cada <a>.

É importante se atentar para o uso de tags que tenham valor semântico, como o <header> e o <nav>.

<header>
  <button class="menu__button">Abrir</button>
  <nav class="menu__nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Produtos</a></li>
      <li><a href="#">Contatos</a></li>
    </ul>
  </nav>
</header>

Acendendo o fogo: configurando o CSS.

Adicionaremos alguns estilos aos nossos elementos, apenas para facilitar a visualização. Irei separar a estilização em 2 etapas:

Pré-aquecer: nessa parte será incluído tudo que é opcional, feito apenas para melhor apresentação do layout, portanto serão exibidas sem explicações aprofundadas.
Assar: nessa parte irei incluir passo a passo os temperos que darão sabor ao nosso hambúrguer.

Estilizaremos utilizando seletores de tags, apenas para ficar mais fácil de entender a qual elemento estamos nos referindo.

Pré-aquecer

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  padding: 5px;
  background: transparent;
  border: solid 3px tomato;
  border-radius: .5rem;
  font-weight: bold;
  width: 4rem;
  cursor: pointer;
}

button:hover {
  background: #000D;
  color: white;
}

ul {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  border: solid 2px black;
  border-radius: 5px;
}

li {
  list-style: none;
  padding: .3rem 1rem;
}

li:hover {
  background: #0003;
}

li:hover a{
  text-decoration: underline;
}

a {
  text-decoration: none;
  color: black;
}

Nosso resultado atual:

Assar

As alterações a seguir, afetarão diretamente o comportamento do menú.
A intenção é que a navbar esteja inicialmente escondida ao acessarmos a página através deu um dispositivo que possua uma tela pequena.
Para isso, iremos alterar seu display padrão para none:

nav {
  display: none;
}

Para fazer com que ele volte a aparecer, iremos criar uma classe modificadora com o nome de nav-active.
Quando essa classe estiver presente no elemento, ele será exibido. Quando ela for retirada, o elemento voltará a ter display: none. Quem fará o controle de incluir/retirar essa classe do nav será nosso botão.

.nav-active {
  display: block;
}

Misturando com JS: dando vida ao botão

Para que consigamos alterar as classes do nav ao clicar no botão. Precisaremos encontrar o elemento do <button> no DOM e armazená-lo em uma variável.
Faremos isso utilizando o comando querySelector.

Utilizaremos a classe desse botão .menu__button para selecionário e o armazenaremos em uma constante com nome de botao.

const botao = document.querySelector('.menu__button')

Agora adicionaremos um escutador de eventos nesse botão, para declararmos uma função que será executada sempre que o botão for clicado.
Esse escutador de eventos recebe dois parâmetros, o evento que será escutado (no nosso caso será o Click), e uma função callback que será executada quando o evento for disparado.

botao.addEventListener('click', funcaoCallback)

Agora basta criarmos a função que irá adicionar e removar a classe active conforme cliquemos no botão, para isso utilizaremos o método classList.toggle. Esse método verifica se o elemento possui uma determinada classe, se ele já tiver a classe ela é removida, se não tiver, ela é adicionada.

function funcaoCallback() {
  const menuNav = document.querySelector('.menu__nav')
  menuNav.classList.toggle('nav-active')
}

Agora nosso menu já está funcionando, só iremos ajustar um detalhe.
O botão está exibindo o texto "Abrir". Vamos fazer com que esse texto seja alterado para "Fechar" quando o menu já estiver aberto alterando nossa funcaoCallback e incluindo um operador ternário:

function funcaoCallback() {
  const menuNav = document.querySelector('.menu__nav')
  menuNav.classList.toggle('nav-active')

  button.textContent === "Abrir"
    ? button.textContent = "Fechar"
    : button.textContent = "Abrir"
}

Alteramos o texto do botão para tornar mais fácil o exemplo. Mas podemos utilizar a mesma lógica para alterar o background, por exemplo, alternando entre um ícone de abrir e fechar.

Exemplo prático

Para melhor visualização do menu em prática, foram incluídos mais alguns elementos no header, ícones no botão do menu e um media querie para alternar.

Como deixar componentes React mais organizados mesmo com Tailwind CSS?!

Carlos Eduardo Ramos — Tue, 04 Apr 2023 15:48:41 +0000

Contexto

Muito se discute sobre as melhores formas de escrever CSS usando React. Por existirem diversas possibilidades (frameworks diferentes, CSS-in-JS, SASS, ...) as opiniões costumam ser divergentes.
Após a recente atualização na documentação do React, o Next.js (Next.js é um framework React full-stack) passou a ser indicado como uma das principais maneiras de se iniciar um projeto React.

Seguindo a própria documentação do Next.js, podemos ver que o Tailwind é uma ótima opção para ser utilizada para estilização:

Tailwind CSS is a utility-first CSS framework that works exceptionally well with Next.js.

As maiores críticas que costumo ver ao Tailwind são:

Deixa o HTML "sujo";
Não pode ser reaproveitado, gerando muita repetição de código.

Conteúdo

Após estudar um pouco sobre CSS Modules e Vanilla Extract, percebi que podemos utilizar a "mesma ideia" de organização para tornar o Tailwind mais agradável e manutenível.

Para isso, vou usar de exemplo a refatoração de um pequeno componente de uma Navbar.

function NavbarUnorganized () {
  return (
    <nav className="flex flex-col lg:flex-row lg:px-48 gap-8 lg:gap-0  py-5 border-b-2 border-green-600 items-center justify-between bg-backgroundWhite">
      <a href="/">
        <img className="w-[125px]" src="#" alt="Logo da Nav de Exemplo." />
      </a>
      <ul className="flex flex-col md:flex-row gap-2 md:gap-8 font-kalam">
          <li><a href="/" className='text-green-600 text-xl lg:text-2xl navlink'>Home</a></li>
          <li><a href="/produtos" className='text-green-600 text-xl lg:text-2xl navlink'>Produtos</a></li>
          <li><a href="/contato" className='text-green-600 text-xl lg:text-2xl navlink'>Contato</a></li>
          <li><a href="/carrinho" className="flex items-center gap-2 text-green-600 text-xl lg:text-2xl navlink">Carrinho</a></li>
      </ul>
    </nav>
  );
}

Nesse caso, temos um componente simples, sem lógica associada. Mesmo assim podemos perceber a dificuldade de dar manutenção em um código assim. Se precisarmos alterar os estilos da lista, teríamos que ir em item por item.

Podemos melhorar isso simplesmente criando um arquivo JS para armazenar os estilos em variáveis:

//index.css.js
export const container = "flex flex-col lg:flex-row lg:px-48 gap-8 lg:gap-0  py-5 border-b-2 border-fontPurple items-center justify-between bg-backgroundWhite"

export const ul = "flex flex-col md:flex-row gap-2 md:gap-8 font-kalam"

export const navLink = "text-green-600 text-xl lg:text-2xl navlink"

Agora podemos importar essas variáveis em nosso componente e utilizá-la em nossas classes, tornando-o bem mais legível:

//index.jsx
import {
    container,
    ul,
    navLink } from "./index.css";

function NavbarOrganized () {
    return (
        <nav className={container}>
          <a href="/">
            <img className="w-[125px]" src={'https://http.cat/202'} alt="Logo da Nav de Exemplo." />
          </a>
          <ul className={ul}>
              <li><a href="/" className={navLink}>Home</a></li>
              <li><a href="/produtos" className={navLink}>Produtos</a></li>
              <li><a href="/contato" className={navLink}>Contato</a></li>
              <li><a href="/carrinho" className={navLink}>Carrinho</a></li>
          </ul>
        </nav>
      )
}

Dica extra

Pelo fato do nosso index.css.js ser um arquivo Javascript, podemos também utilizar interpolações para extrair padrões de texto (conjunto de classes). Por exemplo com padrões que se repetem com frequência como flex-containers, poderíamos passar disso:

export const container = "flex flex-col items-center justify-between lg:flex-row lg:px-48 gap-8 lg:gap-0  py-5 border-b-2  bg-backgroundWhite"

export const ul = "flex flex-col items-center justify-between md:flex-row gap-2 md:gap-8 font-kalam"

export const navLink = "text-green-600 text-xl lg:text-2xl navlink"

Para algo mais simples:

const flexCol = "flex flex-col items-center justify-between" 

export const container = `${flexCol}  lg:flex-row lg:px-48 gap-8 lg:gap-0  py-5 border-b-2  bg-backgroundWhite`

export const ul = `${flexCol} md:flex-row gap-2 md:gap-8 font-kalam`

export const navLink = "text-green-600 text-xl lg:text-2xl navlink"

Como esse tipo de padrão se repete muito ao longo de um projeto, talvez você queira armazenar esses conjuntos de classes em um arquivo global, fora do componentes.

Conclusão

Existem diversas maneiras de tornar o uso do Tailwind mais simples e de aproveitar o reuso dos estilos.
Alguns recursos são nativos e estão na própria documentação (como a extração de classes com o uso do @apply, criação de um componente, uso de loops, etc).

Mas atualmente tenho gostado bastante de extrair como string (em vez de usar @apply), pois é mais rápido/prático.