This is just a neat hack I assembled since I don't need a fancy button or an official plugin, this works fine for my Vencord client.
Be wary, this is a script that you can run in the devtools console and it works with MY current theme which has a horizontal top bar (MaterialDiscord)
if you're planning on turning this into a proper plugin, please do credit me and consider making me a collaborator! my github is @cfuendev
window.sidebarHidden = false;
document.styleSheets[0].insertRule(`
.hiddensidebar-main {
position: absolute !important;
left: 0 !important;
right: 0;
bottom: 0;
max-width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
flex-grow: 1;
}
`)
document.addEventListener('keydown', function(event) {
// Check if Ctrl key is pressed and the '.' key is pressed simultaneously
if (event.ctrlKey && event.key === '.') {
if (window.sidebarHidden) {
document.querySelector("#app-mount > div.appAsidePanelWrapper__5e6e2 > div.notAppAsidePanel__95814 > div.app_b1f720 > div > div.layers__1c917.layers_a23c37 > div > div > div").classList.replace('hiddensidebar-main', 'base_c0676e')
document.querySelector(".base_c0676e").style.top = 'var(--server-container)';
document.querySelector("nav").style.opacity = 1;
window.sidebarHidden = false;
} else {
document.querySelector("#app-mount > div.appAsidePanelWrapper__5e6e2 > div.notAppAsidePanel__95814 > div.app_b1f720 > div > div.layers__1c917.layers_a23c37 > div > div > div").classList.replace('base_c0676e', 'hiddensidebar-main')
document.querySelector(".hiddensidebar-main").style.top = 'calc(var(--server-container) - ' + getComputedStyle(document.querySelector("nav")).width + ')';
document.querySelector("nav").style.opacity = 0;
window.sidebarHidden = true
}
}
});
