☰

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.

// ==UserScript==
// @name         Hide Mastodon Left Panel
// @namespace    http://www.teamshave.com/mastodonleftpanel
// @version      2024-01-26
// @description  A script to shrink the left nav panel when using Mastodon's advanced interface. Click below the profile pic to shrink/expand.
// @author       Dave Tansley
// @match        https://mastodon.world/*
// @match        https://mastodon.social/*
// @match        https://mstdn.social/*
// @match        https://mastodonapp.uk/*
// @match        https://sunny.garden/*
// @match        https://mastodon.gamedev.place/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @run-at       document-end
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    var toggleStyle = function() {
        var elements = document.getElementsByClassName("drawer");

        if (elements.length>0) {
           if (elements[0].classList.contains("collapsed-leftnav")==true){
               elements[0].classList.remove("collapsed-leftnav");
               elements[0].classList.add("expanded-leftnav");
           } else {
               elements[0].classList.add("collapsed-leftnav");
               elements[0].classList.remove("expanded-leftnav");
           } 
        }
    };

    var addEvent = function () {
        var elements = document.getElementsByClassName("drawer__inner__mastodon");

        if (elements.length == 0) {
            setTimeout(addEvent, 1000);
        } else {
            elements[0].addEventListener('click', toggleStyle, false);
            toggleStyle();
        }
    };

    // Listen for the reply button being pressed
    document.addEventListener("click", function(e){
        const target = e.target;
        if (target.classList.contains("fa-reply") || target.classList.contains("fa-reply-all")){
           var elements = document.getElementsByClassName("collapsed-leftnav");
           if (elements.length > 0) toggleStyle();
        }
    });

    addEvent();

    var css = [
	"    .collapsed-leftnav { width: 80px !important;}",
    "    .collapsed-leftnav .compose-form, .collapsed-leftnav .search { display: none; }",
    "    .collapsed-leftnav .navigation-bar__profile, .collapsed-leftnav .navigation-bar__actions { display: none; }",
    "    .collapsed-leftnav .drawer__header {flex-direction: column;}",
    "    .collapsed-leftnav .navigation-bar {padding:10px;}",
    "    .drawer.expanded-leftnav, .drawer.collapsed-leftnav {transition: width 0.2s;}"
    ].join("\n");
    if (typeof GM_addStyle != "undefined") {
        GM_addStyle(css);
    } else if (typeof PRO_addStyle != "undefined") {
        PRO_addStyle(css);
    } else if (typeof addStyle != "undefined") {
        addStyle(css);
    } else {
        var node = document.createElement("style");
        node.type = "text/css";
        node.appendChild(document.createTextNode(css));
        var heads = document.getElementsByTagName("head");
        if (heads.length > 0) {
            heads[0].appendChild(node);
        } else {
            // no head yet, stick it whereever
            document.documentElement.appendChild(node);
        }
    }
})();