Botão de Abrir e fechar menu.

Boa noite pessoal, sou novo em programação e estou tentando colocar em minha página web um botão de abrir e fechar menu. Peço desculpas se caso esteja repetido, é que não encontrei nenhum parecido com o meu, por isso posei essa dúvida. O arquivo usado para o botão é uma imagem.

Está acontecendo o seguinte na minha pagina web:

Na tela de menu no modo responsivo aparece o botão em formato de traços horizontais,

Qdo clico no botão ele aparece o menu, mas não altera o formato do botão para fechar.

Tinha que aparecer o botão de fechar, ao clicar nele teria que alterar o formato do botão para os traços horizontais e sumir o menu .

O botão de abrir e fechar é um arquivo único que é mudado a posição através do background-position

Segue abaixo o meu codigo html, css e JavaScript feito até o momento:

Estrutura HTML do botão:

Segue o CSS do botão

.menu-principal{ margin: 0; }

.menu-principal__lista{ transition: margin 200ms ease-out; }

.menu-principal__item{ transition: all 200ms ease-out; height: 20px; }

.menu-principal__btn{ display: block; width: 50px; height: 50px; text-indent: -9999px; background-image: url('../img/menuprincipal-btn-bg.png'); background-repeat: no-repeat; background-position: -48px 7px; background-color: whitesmoke; border-color: rgb(35, 65, 145); border-style: solid; border-radius: 5px; cursor: pointer;

position: absolute;
top: 15px;
right: 15px;

}

li{ text-decoration: none; list-style: none; font-weight: bold; padding: 5px; padding-bottom: 5px; font-size: 18px; }

@media (max-width: 767px){ .menu-principal__btn{ background-position: 5px 5px; }

.menu-principal--fechado{
    background-position: -48px 7px;
}    

.menu-principal__lista{
    margin: 0;
}

.menu-principal__item{
    margin: 0;
    height: 0;
    display: none;
}

}

Segue o código JavaScript - Eu usei o Jquery - Não enho muito conhecimento do Jquery, como não consegui fazer funcionar, então envolvi o conteúdo dentro de uma função e chamei essa função no botão no HTML.

function clicar(){

$( ".menu-principal__item").toggle(function() {
    $(".menu-principal--fechado").show();
    $(".menu-principal--btn").show();
 }, function() {
    $(".menu-principal__btn").show();
 });

}

Se alguém puder me ajudar no que estou errando.