Return to Answer

// ==UserScript==
// @name         Toggle the right sidebar
// @version      0.5.1
// @author       double-beep
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/*
// @exclude      https://*.*/review*
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @downloadURL  https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
  const buttonWrapper = document.createElement('li');
  buttonWrapper.classList.add('-item');
  const toggleButton = document.createElement('a');
  toggleButton.classList.add('-link');
  toggleButton.id = 'hide-sidebar';
  toggleButton.title = 'Toggle visibility of right sidebar';
  toggleButton.innerHTML = '❯';
  buttonWrapper.appendChild(toggleButton);
  document.querySelector('.-secondary').appendChild(buttonWrapper);

  const sidebar = $(document.querySelector('#sidebar, .sidebar')), mainbar = document.querySelector('#mainbar, .mainbar');
  document.querySelector('#hide-sidebar').addEventListener('click', event => {
    const toggleButton = event.target;
    if (sidebar.is(':visible')) {
      sidebar.hide(200);
      $(mainbar).animate({ width: '100%' }, 200);
      toggleButton.innerHTML = '❮';
    } else {
      sidebar.show(200);
      mainbar.style.width = 'calc(-324px + 100%)';
      toggleButton.innerHTML = '❯';
    }
  });
})();

// ==UserScript==
// @name         Toggle the right sidebar
// @version      0.5.2
// @author       double-beep
// @contributor  Scratte
// @description  Add the ability to toggle the right sidebar
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/*
// @exclude      https://*.*/review*
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @downloadURL  https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    const buttonWrapper = document.createElement('li');

    const toggleButton = document.createElement('a');
    toggleButton.id = 'hide-sidebar';
    toggleButton.title = 'Toggle visibility of right sidebar';
    toggleButton.innerHTML = '❯';
    toggleButton.classList.add('s-topbar--item');

    buttonWrapper.appendChild(toggleButton);

    document.querySelector('.s-topbar--content').appendChild(buttonWrapper);

    const sidebar = $(document.querySelector('#sidebar, .sidebar'));
    const mainbar = document.querySelector('#mainbar, .mainbar');

    document.querySelector('#hide-sidebar').addEventListener('click', ({ target }) => {
        if (sidebar.is(':visible')) {
            sidebar.hide(200);
            $(mainbar).animate({ width: '100%' }, 200);
            target.innerHTML = '❮';
        } else {
            sidebar.show(200);
            mainbar.style.width = 'calc(-324px + 100%)';
            target.innerHTML = '❯';
        }
    });
})();

I made a userscript that allows the user to toggle the visibility of the sidebar (the userscript's source code is also on GitHub):

// ==UserScript==
// @name         Toggle the right sidebar
// @version      0.5.0
// @author       double-beep
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/questions/\d+/
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @downloadURL  https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @grant        none
// ==/UserScript==

(function() {
  const buttonWrapper = document.createElement('li');
  buttonWrapper.classList.add('-item');
  const toggleButton = document.createElement('a');
  toggleButton.classList.add('-link');
  toggleButton.id = 'hide-sidebar';
  toggleButton.title = 'Toggle visibility of right sidebar';
  toggleButton.innerHTML = '❯';
  buttonWrapper.appendChild(toggleButton);
  document.querySelector('.-secondary').appendChild(buttonWrapper);

  const sidebar = $(document.querySelector('#sidebar, .sidebar')), mainbar = document.querySelector('#mainbar, .mainbar');
  document.querySelector('#hide-sidebar').addEventListener('click', event => {
    const toggleButton = event.target;
    if (sidebar.is(':visible')) {
      sidebar.hide(200);
      $(mainbar).animate({ width: '100%' }, 200);
      toggleButton.innerHTML = '❮';
    } else {
      sidebar.show(200);
      mainbar.style.width = 'calc(-324px + 100%)';
      toggleButton.innerHTML = '❯';
    }
  });
})();

The button is in the menu bar:

I made a userscript that allows the user to toggle the visibility of the sidebar (the userscript's source code is also on GitHub):

// ==UserScript==
// @name         Toggle the right sidebar
// @version      0.5.1
// @author       double-beep
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/*
// @exclude      https://*.*/review*
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @downloadURL  https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
  const buttonWrapper = document.createElement('li');
  buttonWrapper.classList.add('-item');
  const toggleButton = document.createElement('a');
  toggleButton.classList.add('-link');
  toggleButton.id = 'hide-sidebar';
  toggleButton.title = 'Toggle visibility of right sidebar';
  toggleButton.innerHTML = '❯';
  buttonWrapper.appendChild(toggleButton);
  document.querySelector('.-secondary').appendChild(buttonWrapper);

  const sidebar = $(document.querySelector('#sidebar, .sidebar')), mainbar = document.querySelector('#mainbar, .mainbar');
  document.querySelector('#hide-sidebar').addEventListener('click', event => {
    const toggleButton = event.target;
    if (sidebar.is(':visible')) {
      sidebar.hide(200);
      $(mainbar).animate({ width: '100%' }, 200);
      toggleButton.innerHTML = '❮';
    } else {
      sidebar.show(200);
      mainbar.style.width = 'calc(-324px + 100%)';
      toggleButton.innerHTML = '❯';
    }
  });
})();

The button is in the menu bar:

// ==UserScript==
// @name         Toggle the right sidebar
// @version      0.4
// @author       double-beep
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/(questions/\d+/|review/*)
// @exclude      /^https://*.*/review/(suggested-edits|reopen)/*
// @exclude      /^https://*.*/review($|.*/(history|stats)$)
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function($) {
  $('.-secondary').append('<li class="-item"><a class="-link" id="hide-sidebar" title="Toggle visibility of right sidebar">&#10095;</a></li>');

  function defineOnClick() {
    const sidebar = $('#sidebar, .sidebar'), mainbar = $('#mainbar, .mainbar');
    $(document).on('click', '#hide-sidebar', function() {
      if (sidebar.is(':visible')) {
        sidebar.hide(200);
        mainbar.animate({'width': '100%'}, 200);
        $(this).html('&#10094;');
      } else {
        sidebar.show(200);
        mainbar.css('width', 'calc(-324px + 100%)');
        $(this).html('&#10095;');
      }
    });
  }
  if (window.location.pathname.match(/\/questions\/\d+/)) defineOnClick();

  var origOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function() {
    this.addEventListener('load', () => {
      if (this.responseURL.match(/\/review\/(next-task|task-reviewed)/)) defineOnClick();
    });
    origOpen.apply(this, arguments);
  };
})(jQuery);

// ==UserScript==
// @name         Toggle the right sidebar
// @version      0.5.0
// @author       double-beep
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/questions/\d+/
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @downloadURL  https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @grant        none
// ==/UserScript==

(function() {
  const buttonWrapper = document.createElement('li');
  buttonWrapper.classList.add('-item');
  const toggleButton = document.createElement('a');
  toggleButton.classList.add('-link');
  toggleButton.id = 'hide-sidebar';
  toggleButton.title = 'Toggle visibility of right sidebar';
  toggleButton.innerHTML = '❯';
  buttonWrapper.appendChild(toggleButton);
  document.querySelector('.-secondary').appendChild(buttonWrapper);

  const sidebar = $(document.querySelector('#sidebar, .sidebar')), mainbar = document.querySelector('#mainbar, .mainbar');
  document.querySelector('#hide-sidebar').addEventListener('click', event => {
    const toggleButton = event.target;
    if (sidebar.is(':visible')) {
      sidebar.hide(200);
      $(mainbar).animate({ width: '100%' }, 200);
      toggleButton.innerHTML = '❮';
    } else {
      sidebar.show(200);
      mainbar.style.width = 'calc(-324px + 100%)';
      toggleButton.innerHTML = '❯';
    }
  });
})();