☰

Hide Mastodon Left Panel

A script to shrink the left nav panel when using Mastodon's advanced interface. Click below the profile pic to shrink/expand.

  1. // ==UserScript==
  2. // @name         Hide Mastodon Left Panel
  3. // @namespace    http://www.teamshave.com/mastodonleftpanel
  4. // @version      2024-01-26
  5. // @description  A script to shrink the left nav panel when using Mastodon's advanced interface. Click below the profile pic to shrink/expand.
  6. // @author       Dave Tansley
  7. // @match        https://mastodon.world/*
  8. // @match        https://mastodon.social/*
  9. // @match        https://mstdn.social/*
  10. // @match        https://mastodonapp.uk/*
  11. // @match        https://sunny.garden/*
  12. // @match        https://mastodon.gamedev.place/*
  13. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  14. // @run-at       document-end
  15. // @grant        GM_addStyle
  16. // ==/UserScript==
  17.  
  18. (function() {
  19.     'use strict';
  20.  
  21.     var toggleStyle = function() {
  22.         var elements = document.getElementsByClassName("drawer");
  23.  
  24.         if (elements.length>0) {
  25.            if (elements[0].classList.contains("collapsed-leftnav")==true){
  26.                elements[0].classList.remove("collapsed-leftnav");
  27.                elements[0].classList.add("expanded-leftnav");
  28.            } else {
  29.                elements[0].classList.add("collapsed-leftnav");
  30.                elements[0].classList.remove("expanded-leftnav");
  31.            } 
  32.         }
  33.     };
  34.  
  35.     var addEvent = function () {
  36.         var elements = document.getElementsByClassName("drawer__inner__mastodon");
  37.  
  38.         if (elements.length == 0) {
  39.             setTimeout(addEvent, 1000);
  40.         } else {
  41.             elements[0].addEventListener('click', toggleStyle, false);
  42.             toggleStyle();
  43.         }
  44.     };
  45.  
  46.     // Listen for the reply button being pressed
  47.     document.addEventListener("click", function(e){
  48.         const target = e.target;
  49.         if (target.classList.contains("fa-reply") || target.classList.contains("fa-reply-all")){
  50.            var elements = document.getElementsByClassName("collapsed-leftnav");
  51.            if (elements.length > 0) toggleStyle();
  52.         }
  53.     });
  54.  
  55.     addEvent();
  56.  
  57.     var css = [
  58. 	"    .collapsed-leftnav { width: 80px !important;}",
  59.     "    .collapsed-leftnav .compose-form, .collapsed-leftnav .search { display: none; }",
  60.     "    .collapsed-leftnav .navigation-bar__profile, .collapsed-leftnav .navigation-bar__actions { display: none; }",
  61.     "    .collapsed-leftnav .drawer__header {flex-direction: column;}",
  62.     "    .collapsed-leftnav .navigation-bar {padding:10px;}",
  63.     "    .drawer.expanded-leftnav, .drawer.collapsed-leftnav {transition: width 0.2s;}"
  64.     ].join("\n");
  65.     if (typeof GM_addStyle != "undefined") {
  66.         GM_addStyle(css);
  67.     } else if (typeof PRO_addStyle != "undefined") {
  68.         PRO_addStyle(css);
  69.     } else if (typeof addStyle != "undefined") {
  70.         addStyle(css);
  71.     } else {
  72.         var node = document.createElement("style");
  73.         node.type = "text/css";
  74.         node.appendChild(document.createTextNode(css));
  75.         var heads = document.getElementsByTagName("head");
  76.         if (heads.length > 0) {
  77.             heads[0].appendChild(node);
  78.         } else {
  79.             // no head yet, stick it whereever
  80.             document.documentElement.appendChild(node);
  81.         }
  82.     }
  83. })();