Create a Toggle button for the right sidebar in Roam.

README.md

Move the right sidebar toggle to a button in the upper right icon tray.

You can add this to Roam using {{[[roam/js]]}}

Grab the code in roam-sidebar-toggle.js and drop it in a javascript code block, nested underneath a {{[[roam/js]]}} block:

  ```javascript```

Additionally, grab the code in roam-sidebar-toggle.css and add it to a CSS code block on a Roam page titled roam/css. This will remove the standard sidebar toggle button inside the right sidebar, freeing up some crucial real estate:

  ```css```

roam-sidebar-toggle.css

/* Optionally add this to your roam/css to kill right sidebar top gap and toggle button within the sidebar as it's no longer necessary */
#right-sidebar div[style*="padding: 8px;"] {
  padding: 0px !important;
} 

#right-sidebar > div.flex-h-box > button {
   display: none;
}

roam-sidebar-toggle.js

const sidebarPress = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 220, ctrlKey: true, shiftKey: true
  });
  
const sidebarPressMac = new KeyboardEvent("keydown", {
  bubbles: true, cancelable: true, keyCode: 220, metaKey: true, shiftKey: true
});

const sidebarPressUp = new KeyboardEvent("keyup", {
    bubbles: true, cancelable: true, keyCode: 220, ctrlKey: true, shiftKey: true
  });
  
const sidebarPressMacUp = new KeyboardEvent("keyup", {
  bubbles: true, cancelable: true, keyCode: 220, metaKey: true, shiftKey: true
});


  setTimeout(createButton, 1000);


  function createButton() {
    if (!document.getElementById('sideBarDiv')) {
      var spanOne = document.createElement('span');
      spanOne.classList.add('bp3-popover-wrapper');
      var spanTwo = document.createElement('span');
      spanTwo.classList.add('bp3-popover-target');
      spanOne.appendChild(spanTwo);
      var toggleSideBar = document.createElement('span');
      toggleSideBar.id = 'sideBarDiv';
      toggleSideBar.classList.add('bp3-icon-menu-open', 'bp3-button', 'bp3-minimal');
      spanTwo.appendChild(toggleSideBar);
      var roamTopbar = document.getElementsByClassName("rm-files-dropzone");
      roamTopbar[0].childNodes[0].appendChild(spanOne);
      toggleSideBar.onclick = toggleTheSideBar;
    }
  }
  
  function toggleTheSideBar() {
      document.activeElement.dispatchEvent(sidebarPress);
      document.activeElement.dispatchEvent(sidebarPressMac);
      document.activeElement.dispatchEvent(sidebarPressUp);
      document.activeElement.dispatchEvent(sidebarPressMacUp);
  }

Sigh... they just changed up the shortcuts to Ctrl/Cmd + \

 const sidebarPress = new KeyboardEvent("keydown", {
    bubbles: true, cancelable: true, keyCode: 191, ctrlKey: true
  });
  
const sidebarPressMac = new KeyboardEvent("keydown", {
  bubbles: true, cancelable: true, keyCode: 191, metaKey: true
});

const sidebarPressUp = new KeyboardEvent("keyup", {
    bubbles: true, cancelable: true, keyCode: 191, ctrlKey: true
  });
  
const sidebarPressMacUp = new KeyboardEvent("keyup", {
  bubbles: true, cancelable: true, keyCode: 191, metaKey: true
});

Roam has now implemented this amazing feature natively - thanks to Robbie for supporting all this while!