☰

Toggle Sidebar in Fextralife

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

  1. // ==UserScript==
  2. // @name        Toggle Sidebar in Fextralife
  3. // @namespace   Zharay Scripting
  4. // @match       https://*.fextralife.com/*
  5. // @grant       none
  6. // @version     1.2
  7. // @author      Zharay
  8. // @description Adds a toggle button at the top left of fextralife pages that will show/hide the side menu.
  9. // @license     MIT
  10. // ==/UserScript==
  11.  
  12. var bIsToggled = true;
  13.  
  14. // Not dynamic? So grabbing globals.
  15. var sidewrapper = document.getElementById("sidebar-wrapper"),
  16.     displayType = sidewrapper.style.display;
  17. var wrapper = document.getElementById("wrapper"),
  18.     paddingLeft = wrapper.style.paddingLeft;
  19.  
  20. // Setup toggle button
  21. var tglNode = document.createElement ('div');
  22. tglNode.innerHTML = '<button id="sideTgl" type="button" class="btn btn-default">Toggle Sidebar</button>';
  23. tglNode.setAttribute ('id', 'myContainer');
  24. tglNode.setAttribute ('style', 'position:fixed;z-index=999;top:0;left:0');
  25.  
  26. function toggleSideMenu (zEvent) {
  27.     // Get latest dynamic style of the menu div.
  28.     var menu = document.getElementById('fex-menu-fixed'),
  29.         style = window.getComputedStyle(menu),
  30.         display = style.getPropertyValue('display');
  31.  
  32.     // If the menu is display none, it likely has the old side menu.
  33.     if (display == "none") {
  34.         bIsToggled = !bIsToggled;
  35.     }
  36.     else { // If it is block, then the new drop-down menu is likely being used.
  37.         bIsToggled = true;
  38.     }
  39.     console.log(bIsToggled);
  40.  
  41.     sidewrapper.style.display = (bIsToggled ? displayType : "none");
  42.     wrapper.style.paddingLeft = (bIsToggled ? paddingLeft : "0px");
  43. }
  44.  
  45. (function() {
  46.     if (sidewrapper) {
  47.         // Hide sidebar and add listener.
  48.         toggleSideMenu();
  49.         window.addEventListener("resize", function() { setTimeout(toggleSideMenu, 100); });
  50.  
  51.         // Add toggle button
  52.         document.body.appendChild (tglNode);
  53.         document.getElementById ("sideTgl").addEventListener ( "click", toggleSideMenu, false );
  54.     }
  55. }) ();