React - problema ao ativar Menu lateral

Fala Julie, tudo bem? Espero que sim!

Não esta funcionando pois você está utilizando duas classNames, ou seja, o react esta utilizando apenas a classe botao-logo, e não a cabecalho__menu, sendo assim o querySelector não encontra esse elemento. Caso queira utilizar mais de uma classe em um elemento, você pode apenas dar um espaço entre elas:

className="cabecalho__menu botao-logo"

E um outro ponto, é que no seu botão você ja utiliza o onClick, então não tem necessidade de utilizar o addEventListener dentro daquela função ja que você ja esta utilizando o evento de click direto no botão.

E lembre-se que no React nós não costumamos utilizar o document.querySelector ou um addEventListener, o que você pode fazer para abrir ou fechar esse menu é utilizar o gerenciamento de estado, criando um estado para indicar se deve ficar aberto ou não:

const [ativo, setAtivo] = useState(false)

Depois no seu botão você pode verificar se o estado e falso ou não:

<button
    class={ativo && "menu-lateral--ativo"}
    onClick={Grid}
></button>

Utilizei o operador ternário && para adicionar a classe somente se o estado ativo for verdadeiro.

E depois podemos modificar a função que você criou, para apenas alterar o valor do estado:

function Grid() {
    setAtivo(!ativo)
}

Dessa forma, você precisa apenas utilizar o estado ativo para definir se esta aberto ou não.

Se ficou meio confusa a explicação, recomendo dar uma olhada na formação React aqui da Alura, la você pode fazer os cursos react e entender um pouco mais sobre a bibilioteca.

Mas antes de fazer esse curso, recomendo seguir primeiro esse plano de estudos de JavaScript, para compreender melhor a linguagem antes de partir para uma framework. (Aprender apenas o básico de JavaScript e ja ir para uma framework pode não ser uma boa ideia, por isso recomendo fazer esse plano de estudos antes)

Espero ter ajudado, abraços e bons estudos :D

Ainda não consegui. Pode me ajudar, por favor?

export default function Contato() { function Grid() { const [ativo, setAtivo] = useState(false); setAtivo(!ativo); } return ( ... <button className="cabecalho__menu botao-logo" aria-label="Menu" class={ativo && "menu-lateral--ativo"} onClick={Grid} > ... )

O useState deve ficar fora dessa função, ela deve ficar no componente, antes do return, e deve ser importado do react, isso de acordo com as regras dos hooks que é o que estamos utilizando:

import React, { useState } from "react"

function SeuComponente() {
    const [ativo, setAtivo] = useState(false)

    return (
      <button
            className=""
            aria-label="Menu" 
            class={ativo ? "menu-lateral--ativo cabecalho__menu botao-logo" : "cabecalho__menu botao-logo"}
            onClick={Grid}           
          >
            <i>
              <img src={Menu} className="icones" />
            </i>
          </button>
    )
}

E você deve utilizar apenas um className por elemento, assim como eu fiz no botão logo acima, utilizando outro operador terminario, verificando se ativo é verdadeiro, adiciona as classes: menu-lateral--ativo cabecalho__menu botao-logo, se for falso, adiciona apenas as classes: cabecalho__menu botao-logo

Isso tudo e muito mais é explicado no curso React: Entendendo como a biblioteca funciona, você pode dar uma olhada la caso fique com dúvida em alguma coisa