menu não abre | CSS: dispondo elementos com Flexbox e Grid

estou trancada aqui pq o meu menu nao abre, podem ajudar?!, já verifiquei, e sim meu index.js está onde está meu index.html.

const botaoMenu = document.querySelector('.cabecalho__menu');
const menu = document.querySelector('.menu-lateral');

botaoMenu.addEventListener('click', () => {
  menu.classList.toggle('menu-lateral--ativo');
})

:root{
  --corpo: #1D232A;
  --cabeçalho: #1D232A;
  --cabeçalho-mobile: #15191C;
  --menu-lateral: #15191C;
  --cartão: #2C343A;
  --fonte: #FFFFFF;
  --fonte-alternativa: #95999C;
  --links: #0480DC;
  --botão: #0480DC;
  --sombras: 0px 4px 4px rgba(0, 0, 0, 0.16);
}
@font-face {
    font-family: 'icones';
    src: url(../font/icones.ttf);
}
body{
  background-color: var(--cabeçalho);
  font-family: 'Open Sans', 'icones', sans-serif;
  color: var(--fonte);
}
.cabecalho{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--cabeçalho-mobile);
  padding: 8px 16px;
  box-shadow: var(--sombras);
}

.cabecalho__menu i::before{
  content: "\e904";
  font-size: 24px;
}

.cabecalho__notificacao i::before{
  content: "\e906";
  font-size: 24px;
}
.cabeçalho__logo{
  width: 40px;
}
.menu-lateral{
  display: flex;
  flex-direction:column;
  background-color: var(--menu-lateral);
  width: 75vw;
  height: 100vh;

  position: absolute;
  left: -100vw;
  transition: .25s;
}
.menu-lateral--ativo{
  left: 0;
  transition: .25s;
}
.menu-lateral__logo{
  width: 118px;
  align-self: center;
  padding: 16px;
}
.menu-lateral__link{
  height: 64px;
  color: var(--fonte-alternativa);
  padding-left: 64px;
  display: flex;
  align-items: center;
}
.menu-lateral__link::before{
  content: "\e906";
  width: 24px;
  height: 24px;
  font-size: 24px;
  position: absolute;
  left: 24px;
}
.menu-lateral__link--ativo{
  color: var(--fonte);
  padding-left: 56px;
  border-left: 8px solid var(--fonte);
}
.menu-lateral__link--inicio::before{
  content: "\e902";
}
.menu-lateral__link--videos::before{
  content: "\e90e";
}
.menu-lateral__link--picos::before{
  content: "\e909";
}
.menu-lateral__link--integrantes::before{
  content: "\e903";
}
.menu-lateral__link--camisas::before{
  content: "\e900";
}
.menu-lateral__link--pinturas::before{
  content: "\e90a";
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">
    <title>HZC Home</title>
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/estilos.css">
</head>
<body>
  <header class="cabecalho">
    <button class="cabecalho__menu" aria-label="Menu"><i></i></button>
    <img src="assets/img/logo.svg" alt="logotipo" class="cabeçalho__logo">
    <button class="cabecalho__notificacao" aria-label="Notificação"><i></i></button>
  </header>
  <nav class="menu-lateral">
    <img src="assets/img/logo.svg" alt="logotipo" class="menu-lateral__logo">
    <a href="#" class="menu-lateral__link menu-lateral__link--inicio menu-lateral__link--ativo">Início</a>
    <a href="#" class="menu-lateral__link menu-lateral__link--videos">Vídeos</a>
    <a href="#" class="menu-lateral__link menu-lateral__link--picos">Picos</a>
    <a href="#" class="menu-lateral__link menu-lateral__link--integrantes">Integrantes</a>
    <a href="#" class="menu-lateral__link menu-lateral__link--camisas">Camisas</a>
    <a href="#" class="menu-lateral__link menu-lateral__link--pinturas">Pinturas</a>
  </nav>
  <script scr="index.js"></script>
</body>
</html>