[Dúvida] Função para mostrar ou ocultar section com JavaScript

Oi, poderiam me ajudar?

Já procurei em vários lugares porém não consigo adaptar o que eu quero para meu projeto:

O que acontece, estou fazendo um projeto de curso para adaptar meu projeto com media queries e no mobile eu inclui um menu. Quando eu abro ele, eu quero que duas sections oculte, e eu consegui fazer isso, porém quando eu fecho eu gostaria que essas duas sections voltassem a aparecer mas não está dando certo essa parte.

Caso possa dar uma olhada no meu https://github.com/leticianovic/css/tree/css-r

Não sei se só essa parte do código, bastará, mas no meu código html eu tenho essas duas sections que preciso que suma quando eu abrir o menu:

<button onclick="animeButton()" id="btn-menu">
                    <span class="linha"></span>
                    <span class="linha"></span>
                    <span class="linha"></span>
</button>               

<div class="menuMobile" id="menuMobile">
                    <nav>
                        <a class="menuMobile__item" href="#sobre">Sobre</a>
                        <a class="menuMobile__item" href="#produto">Soluções</a>
                        <a class="menuMobile__item" href="#como-funciona">Como funciona</a>
                    </nav>
</div>
                
<section id="sobre">
            <div class="container">
                ...
            </div>
</section>

<section id="produto">
            <div class="container">
                ...
            </div>
</section>

e aqui o codigo js, para animar o botão de menu e acrescentei, a partir do "var visible..", esse código para o que preciso:

const divMenu = document.getElementById('menuMobile')
const btnAnimar = document.getElementById('btn-menu')

divMenu.addEventListener('click', animeButton)

function animeButton() {
    divMenu.classList.toggle('abrir')

    btnAnimar.classList.toggle('ativo')

    var visible = document.getElementsByClassName('ativo');

    if (!visible) {
        document.getElementById('produto').style.visibility = 'visible';
        document.getElementById('sobre').style.visibility = 'visible';
    }
    else {
        document.getElementById('produto').style.visibility = 'hidden';
        document.getElementById('sobre').style.visibility = 'hidden';
    }
}

css:

/* MOBILE */
.menuMobile {
    background-color: #1f0b36a8;
    backdrop-filter: blur(20px);
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 0;
    visibility: hidden;
    transition: .5s;
    overflow: hidden;

    nav a {
        color: $colorDefaultW;
        text-decoration: none;
        display: block;
        padding: 20px 30px;
        font-size: 2rem;

        &:hover {
            background-color: #2c0542;
        }
    }
}

#btn-menu {
    width: 40px;
    height: 40px;
    border: 2px solid #EF5FBF;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    outline: none;
}

.linha {
    position: relative;
    height: 3px;
    background: #EF5FBF;
    width: 25px;
    display: block;
    margin: 5px auto;
    transform-origin: center;
    transition: .2s;
}

#btn-menu.ativo {
    border: 2px solid $color;
}

#btn-menu.ativo .linha:nth-child(1) {
    transform: translateY(7px) rotate(-45deg);
    background: $color;
}

#btn-menu.ativo .linha:nth-child(3) {
    transform: translateY(-9px) rotate(45deg);
    background: $color;
}

#btn-menu.ativo .linha:nth-child(2) {
    width: 0;
}