document sidebar toggle (support Vue docs, React docs, TS docs, BootstrapVue docs, MDN docs, GitHub Repo)

main.js

(function() {
  class Sidebar {
    constructor(element) {
      this.element = element;
    }
  
    get display() {
      return this.element.style.display;
    }
  
    set display(value) {
      this.element.style.display = value;
    }
  
    get isShow() {
      return !this.display;
    }
  
    toggle() {
      this.display = this.isShow ? 'none' : null;
    }
  }

  function getSidebarElement() {
    const sidebarSelectorMapBySite = {
      'reactjs.org': 'article + div',
      'beta.reactjs.org': '#__next > .grid > .fixed',
      'www.typescriptlang.org': '#sidebar',
      'bootstrap-vue.org': '.bd-sidebar',
      'github.com': '.Layout-sidebar',
      'developer.mozilla.org': '.sidebar-container'
    };

    const sidebarSelector = sidebarSelectorMapBySite[location.host];

    if (sidebarSelector) {
      return document.querySelector(sidebarSelector);
    }

    /* fallback VuePress */
    /* includes: vuejs.org, localhost:5555 ... */
    return document.querySelector('.sidebar');
  }

  function fixLayout(list, isShowSidebar) {
    const target = list.find(({ isUrlMatch }) => isUrlMatch);
    if (target === undefined) return;

    const { fixTarget } = target;

    if (!fixTarget) return;
    
    const $fixTargets = document.querySelectorAll(fixTarget.selector);
    if ($fixTargets.length === 0) return;

    for (const $fixTarget of $fixTargets) {
      for (const [propertyName, propertyValue] of Object.entries(fixTarget.styles)) {
        $fixTarget.style.setProperty(
          propertyName,
          isShowSidebar ? null : propertyValue
        );
      }
    }
  }

  const fixLayoutList = [
    {
      isUrlMatch: ['pinia.vuejs.org', 'vuex.vuejs.org', 'router.vuejs.org'].includes(location.host),
      fixTarget: {
        selector: '.page',
        styles: { 'margin-left': 0 }
      }
    },
    {
      isUrlMatch: location.host === 'v2.vuejs.org',
      fixTarget: {
        selector: '.content.with-sidebar',
        styles: { 'margin-left': 0 }
      }
    },
    {
      isUrlMatch: location.host === 'beta.reactjs.org',
      fixTarget: {
        selector: '#__next > .grid',
        styles: { 'grid-template-columns': 'auto' }
      }
    },
    {
      isUrlMatch: location.host === 'reactjs.org',
      fixTarget: {
        selector: 'article p',
        styles: { 'max-width': 'initial' }
      }
    },
    {
      isUrlMatch: location.host.endsWith('github.com'),
      fixTarget: {
        selector: '.Layout',
        styles: { '--Layout-sidebar-width': 0 }
      }
    },
    {
      isUrlMatch: location.host.endsWith('developer.mozilla.org'),
      fixTarget: {
        selector: '.main-wrapper',
        styles: {
          'grid-template-areas': '"main"',
          'grid-template-columns': 'minmax(0,2fr)'
        }
      }
    },

    /* fallback VuePress like */
    /* includes: v3.router.vuejs.org, v3.vuex.vuejs.org ... */
    {
      isUrlMatch: true,
      fixTarget: {
        selector: '.page',
        styles: { padding: 0 }
      }
    },
  ];
  
  function main() {
    const $sidebar = getSidebarElement();
    if (!$sidebar) return;

    const sidebar = new Sidebar($sidebar);
    sidebar.toggle();

    fixLayout(fixLayoutList, sidebar.isShow);
  }

  main();
})();