e03.md

Aula Extra 03 Menu Sandwich

Vamos fazer os ajustes no Header para que ele tem a funcionalidade de menu sandwich

1. Adicionar o botão no Header
2. Formatar CSS
3. Utilizar states para controle de exibição do menu

CSS HEADER

No final do arquivo, linha 30 em diante tem os códigos do nosso menu sandwich

.header {
    width: 100%;
    height: 50px;
    background-color: var(--primary);
    color: var(--white);

    display: flex;
    align-items: center;
    justify-content: space-around;
    /* aula 11 extra 01 */
    position: fixed;
    top: 0;
}

.header span {
    font-size: 1.5rem; /* 24px -> 16px = 1rem */
    font-weight: bold;
}

.header a {
    text-decoration: none;
    color: var(--white);
    padding-right: 1.5rem;
    font-size: 1.125rem; /* 18px */
}

.header a:hover {
    color: var(--red);
}

/* menu sandwich */
@media (max-width: 768px) {
    
    .menuButton {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 20px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }

    .linha {
        display: block;
        width: 100%;
        height: 2px;
        background-color: white;
    }

    .menuSandwich {
        display: none;
    }

    .show {
        display: flex;
        width: 50%;
        height: auto;
        position: absolute;
        top: 50px;
        right: 0;
        background-color: var(--primary);
        flex-direction: column;
        padding: 20px;
        gap: 1rem;
    }

}

@media (max-width: 480px) {
    .show {
        width: 100%;
    }
}

INDEX.JSX DO HEADER

Adicionamos o botão menuButton, utilizamos className nesse botão e na tag nav que será o nosso menuSandwich Utilizar useState para controlar o estado de exibição do menu Utilizar a função toggleMenu para mudar o estado de true para false, exibir ou não o menu

1. Na prática o que fizemos foi criar o botão menuButton, formatamos o CSS básico dele.
2. Em seguida, definimos className para a nav que acomoda os nossos links do menuSandwich.
3. Utilizamos useState e a função toggleMenu para controlar ou não a exibição do menuSandwich. 3.1 Inicialmente os links do menuSandwich não aparecem em telas de 768px ou inferiores, só quando clicamos no botão. 3.2 O controle é feito pela class .show se a nav tiver .show aparecem os links se não tiver, não aparece.
4. Por, padrão a nav com os links está com display none para telas de 768px ou inferiores no nosso css.

import { Link } from 'react-router-dom'
import styles from './Header.module.css'
import { useState } from 'react'

function Header() {

  const [ showMenu, setShowMenu ] = useState(false)
  const toggleMenu = () => {
    setShowMenu(!showMenu)
  }

  return (
    <header className={styles.header}>
      <Link to="/">
        <span>edsonMaia.dev</span>
      </Link>
      <nav
        className={`${styles.menuSandwich} ${ showMenu ? styles.show : '' }`}
        onClick={toggleMenu}
      >
        <Link to="/">Home</Link>
        <Link to="/sobre">Sobre</Link>
        <Link to="/projetos">Projetos</Link>
        <Link to="/contatos">Contatos</Link>
      </nav>
      <div
        className={styles.menuButton}
        onClick={toggleMenu}
      >
        <span className={styles.linha}></span>
        <span className={styles.linha}></span>
        <span className={styles.linha}></span>
      </div>
    </header>
  )
}

export default Header

ESTADO (STATE)

O estado no React JS, na prática, é uma constante ou variável que tem um nome que permite acessar ela e um set que permite alterar o valor dela. O React JS provê funções chamadas hooks (ganchos) para controlar algumas ações na sua aplicação. Elas começam com o nome 'use'. O useState é usado para controle de estados. No caso do nosso menuSandwich, precisamos de uma 'variável' ou estado para guardar a informação lógica (true ou false) que será usada como 'gatilho' para indicar ao React JS se vamos ou não exibir (renderizar) algo na tela. A função toogleMenu faz uma 'alternância' ou mudança do valor lógico do nosso state. Se ele for true passa a ser false e vice-versa. Isso, fizemos com a negativa !showMenu.

O nosso state se chama showMenu é uma 'variável boolena' com valor inicial false O set do state se chama setShowMenu. Set é a 'função' que alterar o valor de um state. Dentro da função toggleMenu usamos a instrução:

setShowMenu(!showMenu)

A instrução acima, faz a negação do showMenu, se showMenu = false, então passa a ser true, e vice-versa.

O restante da aula foi focada em passar alguns detalhes e dicas do desafio de trabalhar responsividade e menu sandwich.

Salve Devs, até a próxima!!!