vultr-toggle-sidebar.userscript

vultr-toggle-sidebar.js

// ==UserScript==
// @name         Vultr Toggle Sidebar
// @version      0.2
// @description  Vultr Toggle Sidebar
// @author       Morgan
// @match        https://my.vultr.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=vultr.com
// ==/UserScript==

(function() {
    var styles = `.subnav-items {margin-top: 0;}
    .submenu-list-item {padding: 2px 12px 2px 18px;}
    .tw-list-none {padding-bottom: 3px;}`
    var styleSheet = document.createElement("style")
    styleSheet.innerText = styles
    document.head.appendChild(styleSheet)

    window.originalBody = parseInt(window.getComputedStyle(document.querySelector("body")).getPropertyValue("margin-left"), 10);
    window.modifiedBody = window.originalBody - document.getElementById("header-subnav").offsetWidth + 10 + "px";

    var hs = document.getElementById("header-subnav");
    hs.style.background = "#FAFAFF";
    hs.style.transition = "transform 0.3s ease-out, opacity 0.3s ease-out";
    hs.style.opacity = "0";
    hs.style.transform = "translateX(-100%)";
    hs.style.display = "block";
    hs.style.zIndex = 0;

    document.querySelector("body").style.marginLeft = window.modifiedBody;
    document.querySelector("body").style.transition = "0.3s";

    let btn = document.createElement("button");
    btn.style.cssText = "position:absolute;bottom:20px;left:24px;background-color:transparent;border:none;cursor:pointer;transition:0.3s";
    btn.innerHTML = `
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="8" width="20" height="2" fill="#FFF"></rect><rect x="6" y="15" width="20" height="2" fill="#FFF"></rect><rect x="6" y="22" width="20" height="2" fill="#FFF"></rect></svg>
    `;

    document.getElementById("header0v_0").appendChild(btn);

    btn.addEventListener("click", function() {
        var hs = document.getElementById("header-subnav");
        if (hs.style.opacity == "0" || hs.style.opacity == "") {
            hs.style.opacity = "1";
            hs.style.transform = "translateX(0)";
            document.querySelector("body").style.marginLeft = window.originalBody + "px";
        } else {
            hs.style.opacity = "0";
            hs.style.transform = "translateX(-100%)";
            document.querySelector("body").style.marginLeft = window.modifiedBody;
        }
    });
})();