Submenu toggle setup on small devices

Hello!

On this website: https://claimscollection.eu/ I am trying to do the following with the main menu:

I would need that on the small devices after clicking on the menu item which has a submenu, the user is not linked to the actual page but the submenu is opening instead as a toggle. The website has 3 items with submenus on the Slovak language version and 3 items with submenus on the English version.

I was trying to do the following but it does not seem to work:

if (window.matchMedia("(max-width: 1050px)").matches) {
  document.querySelector('#menu-item-278 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-278 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);
	
  document.querySelector('#menu-item-289 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-289 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);
	
  document.querySelector('#menu-item-856 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-856 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);

  document.querySelector('#menu-item-852 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-852 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);

  document.querySelector('#menu-item-819 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-819 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);

  document.querySelector('#menu-item-848 a').addEventListener("click", function(event) {
         document.querySelector(".menu-item-848 .sub-menu").classList.toggle("toggled-on");
         event.preventDefault();
}, false);

} else {
  
}

Do you have some idea on how to solve this issue, please?