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);
  }

This will create a button in your upper right icon tray to toggle the sidebar. By including the CSS fixes as well, you can get rid of the toggle button within the sidebar completely to free up some real estate. Thx to my friend Abhay Prasanna for suggesting the feature!

As always, add the code to a Javascript codeblock nested in a {{[[roam/js]]}} block. CSS can be added using a CSS codeblock on the roam/css page.

@shodty Line 24 needs to be changed to the following due to a recent update from Roam:
roamTopbar[0].childNodes[0].childNodes[0].appendChild(spanOne);

Thank you @abhayprasanna for sharing a fix. It does not seem to have done the trick.

Maybe you could make this js dynamic and share the github link for import (like roam42 in the screen

shot)? As you are using and updating this with new roam updates which break this.

Unfortunately the latest Roam update changed the topbar again and this time there are issues with the DOM being ephemeral and buttons moving all over the place. I have it fixed as far as it can be but will share once it's more stable.

I prefer not to share JS imports because I'm not a coder and would like folks to fully see what they are copying in. Too much responsibility.

Understood. Thank you!

hey guys! @abhayprasanna's fix seems to work for me but i also updated the js above in roam-sidebar-toggle.js to wait 1 second before trying to append the button to the topbar so it gives the page some time to load. It's definitely a bandaid fix. @orkhan10, let me know if that works. I'll keep an eye on things here in case it doesn't!

sidenote: you can try changing the value in setTimeout(createButton, 1000); to wait longer/shorter to create the button. 1000 = 1000ms = 1 second. so if you changed 1000 to 5000 it would wait 5 seconds after load until trying to insert the button into your DOM. I have tried using some common listener events like 'DOMContentLoaded' to insert the button but haven't had any luck, so for now, I'm just hardcoding the timeout to wait 😂

Works again, great!
Just a very weird behaviour I noticed (and I'm pretty sure that only appeared after one of the updates last week) is that I can't scroll after using the button to open or close the sidebar. Only after pressing any key, scrolling works again.

Hey @JasperGeh I'm not experiencing the same issue but I have a hunch that it thinks the key is still being held down, so I just updated the code in roam-sidebar-toggle.js to also fire a keyup event. Give it a shot and let me know if it works!

@shodty Are you also noticing that the topbar icons move around when the left sidebar is opened and closed? Any potential fixes?

@abhayprasanna I think it's something that changed in Roam overall right? I can think of a work around, lemme test it out

@shodty Exactly - I wouldn't bother, we'll report it and get them to fix it.

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!