Ajuda? | CSS: dispondo elementos com Flexbox e Grid

O lateral do menu nao esta sumindo , oq poderia ser ?

<!DOCTYPE html>

@font-face { font-family: 'icones'; src: url(../font/icones.ttf); }

body { background-color: #1D232A; font-family:'Open Sans', 'icones', 'sans-serif'; color: #FFFFFF; }

.cabecalho{ display:flex; justify-content: space-between; align-items: center; background-color: #15291C; padding: 8px 16px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0, 16px); } .cabecalho__menu i::before{ content: '\e904'; font-size: 24px; }

.cabecalho__notificacao i::before{ content: '\e906'; font-size: 24px }

.cabecalho__logo{ width: 40px; }

.menu-lateral{ display: flex; flex-direction: column; background-color: #15191c; width: 75vw; height: 100vh;

position: absolute;
left: -100vw;

}

.menu-lateral--ativo{ left: 0; }

.menu-lateral__logo{ width: 118px; align-self: center; padding: 16px;

}

.menu-lateral__link{ height: 64px; color: #95999C; padding-left: 64px; display: flex; align-items: center; }

.menu-lateral__link--ativo{ color: #FFFFFF; padding-left: 56px; border-left: 8px #FFFFFF; }

.menu-lateral__link::before{ content: '\e900'; width: 24px; height: 24px; font-size: 24px; position: absolute; left: 24px; }

.menu-lateral__link--inicio--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';
}

const botaomenu = document.querySelector('.cabecalho__menu')

const menu = document.querySelector('.menu-lateral')

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