Adds back forward buttons in Roam - useful when using it as an app

roam_back_forward_navigation.js

;(function () { 
    // Don't show navigation controls on mobile
    if(/Android|iPhone/i.test(navigator.userAgent)){
      return;
    }
  
    // Only show navigation controls when using Roam in app mode
    if ((window.navigator.standalone == true) || (window.matchMedia('(display-mode: standalone)').matches)) {
      const navigation_controls = document.createElement("div");    
      navigation_controls.id = 'roam-navigation-controls';     
      navigation_controls.style.display = 'block';
      navigation_controls.setAttribute("style", "display: block; left: 2px; width: 35px; max-width: 35px!important; top: 40px; position: relative; z-index: 100000;");

      const navigation_controls_back = document.createElement("i");    
      navigation_controls_back.id = 'roam-navigation-controls_back';     
      navigation_controls_back.style.display = 'block'; 
      navigation_controls_back.setAttribute('style', "margin-bottom:2px;border: solid black;border-width: 0 3px 3px 0;display: inline-block;position: relative;padding: 5px;transform: rotate(135deg);-webkit-transform: rotate(135deg);cursor: pointer;")
      navigation_controls_back.onclick = () => {
        window.history.back();
      }
      navigation_controls_back.title = 'Go back';

      const navigation_controls_forward = document.createElement("i");    
      navigation_controls_forward.id = 'roam-navigation-controls_forward';     
      navigation_controls_forward.style.display = 'block'; 
      navigation_controls_forward.setAttribute('style', "margin-bottom:2px;border: solid black;border-width: 0 3px 3px 0;display: inline-block;position: relative;padding: 5px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);cursor: pointer;")
      navigation_controls_forward.onclick = () => {
        window.history.forward();
      }

      navigation_controls_forward.title = 'Go forward';

      const toolbar_container = document.querySelector('.roam-topbar');
      const toolbar_container_flex_box = toolbar_container.querySelector('.flex-h-box');

      toolbar_container_flex_box.prepend(navigation_controls);

      document.getElementById("roam-navigation-controls").appendChild(navigation_controls_back);
      document.getElementById("roam-navigation-controls").appendChild(navigation_controls_forward);
    }
})();