BarbaJS

To add your own Javascript, the theme already loads custom-scripts.js file, which you can find it here: /wp-content/themes/artware-child/js, inside the child theme.

There, you can add any script you want. If you need to implement BarbaJS functionality, you can use this code:

if (window.addCustomHook) {
  addCustomHook('enter', function(data) {
    console.log('Barba: enter');
  });

  addCustomHook('after', function(data) {
    console.log('Barba: after (' +data.next.url.href+ ')');
  });
}

There are hooks for every BarbaJS event: before, leave, beforeEnter, enter, after and afterEnter. The hooks contain the data callback so that you can access BarbaJS content, as you can see in the example above.

// Function to update menu item classes
function updateCurrentMenuItem(nextUrl) {
  document.querySelectorAll('.menu-item a').forEach((menuItem) => {
    menuItem.parentElement.classList.remove('current-menu-item');
  });
  document.querySelectorAll('.menu-item a').forEach((menuItem) => {
    if (menuItem.href === nextUrl) {
      menuItem.parentElement.classList.add('current-menu-item');
    }
  });
}
if (window.addCustomHook) {
  addCustomHook('beforeEnter', function(data) {
    updateCurrentMenuItem(data.next.url.href);
  });
}

Sometimes when you navigate from page A to page B, the menu items change their color based on the .current-menu-item class name. The script above will update the menu item class names.