roam_back_forward_navigation_with_sidebar_state.js

;(function () { 
    // Don't show navigation controls on mobile
    var initialize_back_forward_buttons = () => {
      
      // Don't show navigation controls on mobile
      if(/Android|iPhone/i.test(navigator.userAgent)){
        return;
      }
      
      if(window.initialized_back_forward_buttons) {
        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('.rm-topbar');
        const toolbar_container_flex_box = toolbar_container.querySelector('.flex-h-box');

        toolbar_container.prepend(navigation_controls);

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

        const add_sidebar_state_class_to_navigation_controls = () => {
          const update_navigation_bar_class = (on_first_load = false) => {
            var nextSibblingTag = navigation_controls.nextSibling.tagName;
            if (on_first_load) {
              navigation_controls.className = (nextSibblingTag == "SPAN") ? 'left-sidebar-closed' : 'left-sidebar-open';          
            }
            else {
              navigation_controls.className = (nextSibblingTag == "SPAN") ? 'left-sidebar-open' : 'left-sidebar-closed';
            }
          }

          const roamSidebarContainerFlex = document.querySelector('.roam-sidebar-container .flex-v-box .flex-h-box');
          roamSidebarContainerFlex.addEventListener("DOMNodeRemoved", function (event) {
            update_navigation_bar_class();
          }, false);  

          roamSidebarContainerFlex.addEventListener("DOMNodeInserted", function (event) {
            update_navigation_bar_class();
          }, false);

          update_navigation_bar_class(true);
        }

        add_sidebar_state_class_to_navigation_controls();
        window.initialized_back_forward_buttons = true;
      }
    }

  var interval = setInterval(function() {
    var roam_topbar = document.querySelector('.rm-topbar');
    if(roam_topbar) {  
      clearInterval(interval);
      initialize_back_forward_buttons();
    }
  }, 500);
})();