Wordpress Admin bar

In order to have a working admin bar on the wordpress websites that uses Highway, you will have to:

• Remove Highway's listeners on Wordpress admin bar links
• Replace every admin bar link's href value on page change

Here is an exemple of how it is possible to achieve this :

// File: main.js
const H = new Highway.Core();

// On load:
// Query admin bar links and detach them from Highway transitions
const adminBarLinks = document.querySelectorAll('#wpadminbar a');
H.detach(adminBarLinks);

// On page transition:
H.on('NAVIGATE_END', ({ to, from, trigger, location }) => {
  // Query admin bar links, and new page's admin bar links
  const adminBarLinks = document.querySelectorAll('#wpadminbar a');
  const newAdminBarLinks = to.page.body.querySelectorAll('#wpadminbar a');

  // Replace every admin bar link's href value with new value
  for (let i = 0; i < newAdminBarLinks.length; i++) {
    adminBarLinks[i].href = newAdminBarLinks[i].href;
  }

  // Detach admin bar links from Highway transitions
  H.detach(adminBarLinks);
});

Anoter possibility is to only init Highway when the admin bar is not existing (thus the user not being an admin) in the DOM

const adminBar = document.querySelector('#wpadminbar');

if (!adminBar) {
  const H = new Highway.Core();
  // ...
}