Read the Docs Sidebar Folding

Add a switch to collapse and expand the sidebar.

اعتبارا من 03-03-2024. شاهد أحدث إصدار.

Ask a question, post a review, or report the script.

Wrap lines

// ==UserScript==
// @name         Read the Docs Sidebar Folding
// @namespace    http://tampermonkey.net/
// @version      2024-03-03-v2
// @description  Add a switch to collapse and expand the sidebar.
// @author       ssnangua
// @match        https://*.readthedocs.io/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=readthedocs.io
// @grant        GM_addStyle
// @grant        GM_addElement
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
    .wy-nav-side, .fold>.rst-versions {
      transition: left 0.3s;
    }
    .wy-nav-content-wrap {
      transition: margin-left 0.3s;
    }
    .fold .wy-nav-side, .fold>.rst-versions {
      left: -300px;
    }
    .fold .wy-nav-content-wrap {
      margin-left: 0;
    }
    .fold-handler {
      z-index: 1000;
      opacity: 0.3;
      position: fixed;
      left: 300px;
      top: 50%;
      transform: translateY(-50%);
      border-left: none;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      padding: 10px 4px !important;
      transition: all 0.3s;
    }
    .fold-handler:hover {
      opacity: 1;
    }
    .fold .fold-handler {
      left: 0;
    }
    .fold-handler::after {
      content: "<";
    }
    .fold .fold-handler::after {
      content: ">";
    }
    `);

    const handler = GM_addElement(document.body, 'div', {
        'class': 'btn btn-neutral fold-handler'
    });
    handler.onclick = () => {
        const isFold = document.body.classList.contains('fold');
        document.body.classList[isFold ? 'remove' : 'add']('fold');
    }
})();