Firefox userChrome to autohide Sideberry panel and hide titlebar tabs, and autohide Page Actions.

userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
 * This style will hide the tab bar. For MacOS Big Sur
 *
 * Contributor(s): Isaac-Newt, Ivan0xFF, millerdev, AMomchilov
 */

 #titlebar {
  visibility: collapse;
}

/* Position window controls */
#TabsToolbar .titlebar-buttonbox-container {
  display: block;
  position: absolute;
  visibility: visible;
}

/* Reposition the close/maximize/minimize buttons for the "normal" toolbar density  */
/* When the UI density is set to "normal", the `uidensity` attribute is undefined.  */
/* `window.document.documentElement.getAttribute("uidensity")` will be null.        */
:root:not([uidensity]) #TabsToolbar .titlebar-buttonbox-container {
  margin-left: 12px;
  margin-top: 12px;
}

/* Reposition the close/maximize/minimize buttons for the "compact" toolbar density */
:root[uidensity="compact"] #TabsToolbar .titlebar-buttonbox-container {
  margin-left: 10px;
  margin-top: 9px;
}

#TabsToolbar .titlebar-buttonbox.titlebar-color {
  margin-left: 0px !important;
}

/*
 * Make room for window controls and a bit of extra space for window drag/move.
 * Only apply this style when not in fullscreen mode.
 */
#main-window:not([inFullscreen]) #nav-bar {
  padding: 0px 0px 0px 70px !important;
}

/*  Sideberry Dynamic sidebar   */

/* Add the following to Sideberry settings/Styles Editor/Sidebar:
.Tab[data-pin="false"] .ctx {
  right: unset !important;
}
*/

#sidebar-box {
  background-color: #2B2A33;
  overflow: hidden;
  height: calc(100% + 6px);
  position: fixed;
  max-width: 26em !important;
  width: 100% !important;
  display: block;
  transition: 90ms;
}

#sidebar-box:hover {
  padding-bottom: 50px;
  position: absolute;
  z-index: 1;
}

#sidebar-header {
  background-color: #2B2A33;
}

#sidebar {
  width: calc(45px * 7) !important;
  max-width: 50vw !important;
  height: 100%;
}

#sidebar:hover {
  max-width: 100% !important;
}

#appcontent {
  margin-left: 45px;
}

/* Page Actions Hide and Show on Hover */

/* Hide Buttons and Reveal on Hover */

#page-action-buttons:not(:hover) .urlbar-page-action,
#page-action-buttons:not(:hover) #star-button
{
  width: 0px !important;
  min-width: 0px !important;
  padding-left: 0px !important;
  padding-right: 10px !important;
  margin-right: -5px !important;
  transition: all 250ms ease-in-out;
}

#page-action-buttons:not(:hover) #userContext-indicator {
  margin-right : 45px !important;
  transition: all 250ms ease-in-out;
}

#page-action-buttons:hover .urlbar-page-action,
#page-action-buttons:hover #star-button  {
  visibility: visible;
  min-width: unset !important;
}

#page-action-buttons:hover #userContext-indicator {
  margin-right : 0px !important;
}

/* Create page actions hover "button" */
#page-action-buttons::after {
  content: "•••";
  position: absolute;
  top: 0.7em;
  font-size: 0.7em;
  opacity: 0.5;
  right: 8px;
  transition: all 50ms ease-in-out;
}

/* Hide the button on hover */
#page-action-buttons:hover::after {
  display: none !important;
  width: 0px !important;
  margin-left: 0px !important;
  transition: all 50ms ease-in-out;
}

/* Hide URLBar Buttons and Reveal on Hover Finished*/
#urlbar,#searchbar {
  font-size: 13px !important;
	margin-top: 1px !important;
}

Thanks for your work, as an alternative I have made another version which shows the sidebar when #appcontent (the page) is not hovered : https://gist.github.com/thoughtsunificator/4f6e23df5df450884e540e1670932f0d

This is literally everything I've been wanting from a vertical tabs code; thank you so much! However, I'm getting this strange issue where my windows control are behind other icons rather than sitting somewhere useable. What part of the code do I have to modify to fix this?