Fechar menu ativo na versao Mobile

Estou utilizando um menu que na versão mobile abre e fecha da lateral, e queria apenas adicionar uma função para que ao clicar em algum dos botões do menu, ele também fechasse. Eu tentei colocando o querySelector 'a' no JS mais ele pega apenas o primeiro botão. Alguém pode me ajudar??

Obrigado!!

Segue código HTML

<nav class="barra-nav">
                            <button class="menu-fechar"><img src="images/fechar-menu.png"></button>
                            <ul class="menu-principal">
                                <li><a href="#logo">Home</a></li>
                                <li><a href="#home">Quem Somos</a></li>
                                <li><a href="#portfolio">Portfólio</a></li>
                                <li><a href="#clientes">Clientes</a></li>
                                <li><a href="#contato">Contato</a></li>
                            </ul>
                        </nav>

Segue JS

document.querySelector('.menu-abrir'). = function () {
    document.documentElement.classList.add('menu-ativo');
};

document.querySelector('.menu-fechar').onclick = function () {
    document.documentElement.classList.remove('menu-ativo');
};


document.documentElement.onclick = fu     nction (event) {
    if (event.target === document.documentElement) {
        document.documentElement.classList.remove('menu-ativo');
    }
};