☰

Toggle Sidebar in Fextralife

Adds a toggle button at the top left of fextralife pages that will show/hide the side menu.

// ==UserScript==
// @name        Toggle Sidebar in Fextralife
// @namespace   Zharay Scripting
// @match       https://*.fextralife.com/*
// @grant       none
// @version     1.2
// @author      Zharay
// @description Adds a toggle button at the top left of fextralife pages that will show/hide the side menu.
// @license     MIT
// ==/UserScript==

var bIsToggled = true;

// Not dynamic? So grabbing globals.
var sidewrapper = document.getElementById("sidebar-wrapper"),
    displayType = sidewrapper.style.display;
var wrapper = document.getElementById("wrapper"),
    paddingLeft = wrapper.style.paddingLeft;

// Setup toggle button
var tglNode = document.createElement ('div');
tglNode.innerHTML = '<button id="sideTgl" type="button" class="btn btn-default">Toggle Sidebar</button>';
tglNode.setAttribute ('id', 'myContainer');
tglNode.setAttribute ('style', 'position:fixed;z-index=999;top:0;left:0');

function toggleSideMenu (zEvent) {
    // Get latest dynamic style of the menu div.
    var menu = document.getElementById('fex-menu-fixed'),
        style = window.getComputedStyle(menu),
        display = style.getPropertyValue('display');

    // If the menu is display none, it likely has the old side menu.
    if (display == "none") {
        bIsToggled = !bIsToggled;
    }
    else { // If it is block, then the new drop-down menu is likely being used.
        bIsToggled = true;
    }
    console.log(bIsToggled);

    sidewrapper.style.display = (bIsToggled ? displayType : "none");
    wrapper.style.paddingLeft = (bIsToggled ? paddingLeft : "0px");
}

(function() {
    if (sidewrapper) {
        // Hide sidebar and add listener.
        toggleSideMenu();
        window.addEventListener("resize", function() { setTimeout(toggleSideMenu, 100); });

        // Add toggle button
        document.body.appendChild (tglNode);
        document.getElementById ("sideTgl").addEventListener ( "click", toggleSideMenu, false );
    }
}) ();