Boa noite Gabryel, tudo bem?

Posta seu código aqui usando o símbolo </> no editor de comentários, pra que possamos entender melhor o que pode estar ocorrendo, e te ajudar! Por gentileza.

ótimos estudos!

O meu está diferente pois estou fazendo este código para um portfólio meu mas utilizei da mesma lógica que o exercício traz;

    <header class="cabecalho-mobile">
        <button class="menu-botao" aria-label="Menu">
            <i class="fa-solid fa-bars"></i>
        </button>
        <button>
            <i class="fa-solid fa-square-share-nodes"></i>
        </button>
    </header>    

    <nav class="menu__aberto--mobile menu-ativo">
        <a href="#" class="link-ativo"><i class="fa-solid fa-house"></i>Inicio</a>
        <a href="#"><i class="fa-solid fa-address-card"></i>Currículo</a>
        <a href="#"><i class="fa-solid fa-ranking-star"></i>Certificados</a>
        <a href="#"><i class="fa-solid fa-laptop-code"></i>Projetos</a>
        <a href="#"><i class="fa-solid fa-envelope-open-text"></i>Enviar proposta</a>
        <a href="#footer"><i class="fa-solid fa-circle-info"></i>Informações de contato</a>
    </nav>

    .menu__aberto--mobile{
        width: 266px;
        height: 391px;

        background: linear-gradient(180.23deg, #000000 -7.23%, #38474A 108.24%);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
        border-radius: 0px 0px 10px 0px;

        margin: .25rem 0 0 .25rem;

        display: flex;
        align-items: left;
        justify-content: left;
        flex-direction: column;

        position: absolute;

        z-index: 2;

        opacity: 0;

        transition: .25s;
}

.menu-ativo{
    opacity: 1;

    transition: .25s;
}

const menuBotao = document.querySelector('.menu-botao')
const menu = document.querySelector('.menu__aberto--mobile')

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