Mobile menu flicker and causes link underneath the trigger

I inherited a site with terrible code, e.g.: 15000 lines of CSS, the mobile menu was not working but I was able to create a new mobile menu that kind of works, the issue is when I click on an item the menu flickers and the link underneath is the one that get activated.

this is the js code I used for the toggle, pretty sure this is the issue, but I am unsure of how to fix it.

document.addEventListener('DOMContentLoaded', function() {

    var menuToggle = document.querySelector('.menu-toggle');

    var siteNavigation = document.querySelector('#site-navigation');

    if (menuToggle && siteNavigation) {

        menuToggle.addEventListener('click', function() {

            siteNavigation.classList.toggle('toggled');

            this.setAttribute('aria-expanded', siteNavigation.classList.contains('toggled'));

        });

    }

});

Another issue is the submenus all open at the same level, I put a temporary fix in but its a bad fix.

The page I need help with: [log in to see the link]