Refactor client-side navigation system in web UI to utilize HTTP requests to load new pages, rather than loading them all initially.

[st-randers]

^^ This will allow us to utilize mustache to load page data from node-red, rather than constant javascript DOM changes ^^

you can use the HTML5 pushState() and popstate events to achieve this. Here's an example of how you can use these features to create a simple client-side navigation system:

window.addEventListener('popstate', function(event) {
  // Use event.state to load the appropriate page content
});

function navigateTo(url) {
  // Load page content using XHR or Fetch API
  fetch(url)
    .then(function(response) {
      return response.text();
    })
    .then(function(html) {
      // Insert the new page content into the document
      document.querySelector('#content').innerHTML = html;

      // Update the URL and push the new state to the browser's history
      window.history.pushState({url: url}, '', url);
    });
}

// Bind click event to all internal links
document.querySelectorAll('a[href^="/"]').forEach(function(link) {
  link.addEventListener('click', function(event) {
    event.preventDefault();
    navigateTo(this.href);
  });
});

With above code, you can use anchor links to load new pages without refreshing the browser window and also support browser navigation buttons.