Olá, tudo bem?

Gostaria de saber se existe como ao invés de usar --ativo no código abaixo, usar o pseudo-class :active.

Segue abaixo o código CSS com o --ativo

.menuLateral{
    display:flex;
    flex-direction: column;
    background-color: #15191C;
    width: 75vw;
    height: 100vh;
    position: absolute;
    left: -100vw;
    transition: 300ms;
}
.menuLateral--ativo{
    left: 0;
    transition: 300ms;
}

Código do index.js:

const botaoMenu = document.querySelector('.cabecalho__menu')
const menu = document.querySelector('.menuLateral')

botaoMenu.addEventListener('click', () => {
    menu.classList.toggle('menuLateral--active')
})

Tentei fazer da forma abaixo, mas não funcionou:

CSS com :active

.menuLateral{
    display:flex;
    flex-direction: column;
    background-color: #15191C;
    width: 75vw;
    height: 100vh;
    position: absolute;
    left: -100vw;
    transition: 300ms;
}
.menuLateral:active{
    left: 0;
    transition: 300ms;
}

Código do index.js que tentei fazer, mas não funcionou:

const botaoMenu = document.querySelector('.cabecalho__menu')
const menu = document.querySelector('.menuLateral')

botaoMenu.addEventListener('click', () => {
    menu.classList.toggle('menuLateral:active')
})

Existe alguma forma de usar .menuLateral:active no CSS e mesmo assim conseguir fazer o menu lateral abrir quando clicar no botão, via JS?