Lack of interest Collapse AdminCP sidebar to the left to increase editor box size

[Joe Link]

It'd be great if we could get a simple option to collapse the AdminCP sidebar to the left. Those of us who work with a lot of templates on vertical monitors could really use the space.

With Sidebar




Without

 

[Masetrix]

Eat this

XF 2.1 - Admin Side Menu

How can I make the admin side menu off canvas on all screens, not just on mobile?

xenforo.com

 

[Joe Link]

After I posted this I got to playing around a bit and figured out how to add a button to the menu. I'll post about it and update this

 

[Joe Link]

Disclaimer: I have no idea what I'm doing, but sometimes I get lucky hacking code together

I believe the site has to be in development mode for this to work.

1. In AdminCP go to Appearance -> Template Modifications and click the Admin tab at the top.
2. Click Add template modification
3. Copy/Paste the following into the boxes

Template: PAGE_CONTAINER
Modification key: link_admincp_collapse_button
Description: Add collapse sidebar button to AdminCP UI
Find:

<div class="p-header-buttons p-header-buttons--opposite">

Replace:

$0
<a class="p-header-button" onclick="myFunction()">
            <xf:fa icon="fa-minus-square" />
</a>

<xf:js>

const showMsg = localStorage.getItem('showMsg');

if(showMsg === 'false'){
  $('.p-nav').hide();
}
   
function myFunction() {
  var x = document.getElementById("js-nav");
  if (x.style.display === "none") {
    x.style.display = "block";
    localStorage.setItem('showMsg', 'true');
  } else {
    x.style.display = "none";
    localStorage.setItem('showMsg', 'false');
  }
}
</xf:js>

You should see an icon next to the gear at the top to toggle the sidebar.