Animowany burger

Witam chcę sobie zrobić animowanego burgera jednak spotkałem problem , że po kliknięciu nie chce mi nic zrobić. I się zastanawiam czyta to jest sprawka tego , że źle nazywam klasy. Dodam , że w konsoli zmienną wyszukuje i klasa się dodaje.

const openMobileNav = document.querySelector('.app-nav--burger');
openMobileNav.addEventListener('click', function () {
    openMobileNav.classList.toggle('app-nav--burger__active');
})

<nav class="app-nav">
        <ul class="app-nav--list">
            <li class="app-nav--item">
                <a href="#" class="app-nav--link">Home</a>
            </li>
            <li class="app-nav--item">
                <a href="#" class="app-nav--link">About</a>
            </li>
            <li class="app-nav--item">
                <a href="#" class="app-nav--link">Skills</a>
            </li>
            <li class="app-nav--item">
                <a href="#" class="app-nav--link">Projects</a>
            </li>
            <li class="app-nav--item">
                <a href="#" class="app-nav--link">Contact</a>
            </li>
        </ul>
        <div class="app-nav--burger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

.app-nav {
    width: 100%;
    position: fixed;
    background-color: rgba(70, 66, 66, 0.589);
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .app-nav--list {
        display: flex;
        padding: 25px;
        list-style-type: none;

        .app-nav--item {
            margin: 0 15px;

            .app-nav--link {
                text-decoration: none;
                color: white;
                position: relative;


                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    border-bottom: 2px solid white;
                    width: 0;
                    margin: -2px 0;
                    transition: width .4s cubic-bezier(.68, -0.55, .27, 1.55);
                }

                &:hover::before {
                    width: 100%;
                }
            }
        }
    }

    .app-nav--burger {
        width: 45px;
        height: 35px;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;

        &.__active {
            transform: rotate(90deg);
        }

        span {

            width: 100%;
            height: 7px;
            background-color: black;

        }
    }
}

Jak możesz to wrzuć to na http://jsfiddle.net i podeślij nam tutaj link do swojej wrzutki. W ten sposób znacznie ułatwisz nam pracę :)

https://jsfiddle.net/xae6jod4/ albo git https://github.com/Raloseq/Portfolio

A co z fragmentem <script src="js/nav.js"></script> - czy jest tam coś istotnego? Bo odwołujesz się do niego, ale pliku brak.

A powiedz jeszcze, czy teraz zależy Ci żeby ustalić, dlaczego to nie działa, czy chcesz mieć po prostu sprawnego burgera? Bo szczerze mówiąc nie mam teraz czasu, żeby to rozkminiać w tej chwili, ale jeśli chcesz mieć działającą wersję to możesz skorzystać z gotowego rozwiązania - https://jonsuh.com/hamburgers/

Zobacz też taki szajs: https://jonsuh.com/hamburgers/