Desafio aceito

index.js

let $ = document.querySelector.bind(document)

let cabecalhoMenu = $('[data-cabecalho-menu]')
let menuLateral = $('[data-menu-lateral]')

cabecalhoMenu.addEventListener('click', e =>{
    menuLateral.classList.toggle('ativo')
})

index.html

    <header class="cabecalho">
        <button class="cabecalho__menu" aria-label="menu" data-cabecalho-menu><i></i></button>
        <a href="index.html" class="cabecalho__link-logo"><img src="img/logo.svg" alt="Logotipo da HZC"></a>
        <button class="cabecalho__notificacao" aria-label="notificação"><i></i></button>
    </header>
    <nav class="menu__lateral" data-menu-lateral>
        <img src="img/logo.svg" alt="Logotipo da HZC" class="menu__lateral-logo">
        <a href="#" class="menu__lateral-link menu__lateral-link--inicio menu__lateral-link--ativo">Inicio</a>
        <a href="#" class="menu__lateral-link menu__lateral-link--video">Video</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 src="js/index.js"></script>

menu__lateral.css

.menu__lateral{
    display: none;
    flex-direction: column;

    background-color: var(---menu_lateral);

    width: 75vw;
    height: 100vh;
}

.menu__lateral.ativo{
    display: flex;
}