Toggle Slack sidebar

README.md

Toggle Slack Sidebar

The code has been tested on Slack's desktop app (version 3.3.3) on macOS 10.14. Your milage may vary.

Tired of the Slack sidebar claiming a bunch of your precious screen estate? With this little hack you can toggle it! It includes changing one of Slack's built-in files, so be careful and backup.

How to add this

In your terminal:

1. cd /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static
2. cp ssb-interop.js ssb-interop.bak
3. Edit ssb-interop.js with your editor of choice. Add the code from the file below at the end, just before the closing }. Don't touch anything else :)
4. Save and close
5. Restart Slack

How to use it

The sidebar will be hidden by default. To show it, press shift+cmd+b. To hide it again, press the same key combo one more time.

add-to-ssb-interop.js

	/**
	 * Append some simple CSS to control the visibility of the sidebar, and a event listener to toggle that CSS.
	 */
	document.addEventListener("DOMContentLoaded", function() {
		const styleId = 'sidebarModifierCSS';
		let displayMode = 'none';
		let s = document.createElement('style');
		s.type = 'text/css';
		s.id = styleId;
		s.innerHTML = `.client_channels_list_container { display: ${displayMode}; }`;
		document.head.appendChild(s);

		document.addEventListener('keydown', e => {
      // Replace this if statement to change the key combo that toggles the sidebar
			if (e.metaKey && e.shiftKey && e.keyCode === 66) {
				let d = document.getElementById(styleId);

				displayMode = displayMode === 'none' ? 'flex' : 'none';
				d.innerHTML = `.client_channels_list_container { display: ${displayMode}; }`;
			}
		});
	});