Is it possible to hide the sidebar (File Explorer and Outline)

[Skylarzz]

And have it slide in like a drawer, much like the tab section or title bar?

This theme is so fantastic, the best and my favorite, many thanks to @hydescarf for creating it!

[hydescarf]

Honestly, very interesting concept that I'd like to use as well. I finally got my time to write the script so here's the snippet you can use.
Few things first to say is that, there can be better way but might be hacky, otherwise this is quick and fine but has one problem. You need to know the width of the left-sidebar. If you don't know how to look for the width, a short guide:

1. (Ctrl + Shift + i) when you're inside your Obsidian app.
2. (Ctrl + F) on the panel opened on 1. and search for workspace-split mod-horizontal mod-sidedock mod-left-split
3. You should see something like this image:
4. Copy the width inside; In this case for my sidebar, it's 340px.
5. Note that the width changes if you resize the left-sidebar! Just remember to take the new size after resizing.

---

Now here's the snippet you can use

/* SIDEBAR SLIDING IN & OUT UPON HOVER */
.workspace-split.mod-horizontal.mod-sidedock.mod-left-split{
	position:absolute;
	z-index:1;
	translate:calc(-100% + 10px);
	left:0;
	transition:translate 0.2s;
}
.workspace-split.mod-horizontal.mod-sidedock.mod-right-split{
	position:absolute;
	z-index:1;
	translate:calc(100% - 10px);
	right:0;
	transition:translate 0.2s; /* updated */
}

.workspace-split.mod-vertical.mod-root, .workspace-split.mod-vertical.mod-root .workspace-leaf-content{
	transition:translate 0.2s;
}
.workspace-split.mod-horizontal.mod-sidedock.mod-left-split:hover, .workspace-split.mod-horizontal.mod-sidedock.mod-right-split:hover{
	translate:0;
}

/* to shrink the container of middle-pane so that background is exposed for left-dock */
.workspace-split.mod-horizontal.mod-sidedock.mod-left-split:hover + .workspace-split.mod-vertical.mod-root{
	translate:340px; /* You need to know the size of the left-dock unfortunately, through Ctrl+Shift+I and search for the css class, click on it and look at its width */
}
/* to offset the content of middle-pane so that it stays static, can be disabled if you want the content to move along when the dock slides in and out */
.workspace-split.mod-horizontal.mod-sidedock.mod-left-split:hover + .workspace-split.mod-vertical.mod-root .workspace-leaf-content{
	translate:-340px;
}


/* to fix the right-tab toggle button to not go into min-max-close buttons; not sure about mac OS */
.workspace-tab-header-container{ 
	padding-right:calc(var(--size-4-2) + var(--frame-right-space));
}

You should see two section that has 340px in it, replace the number with your left-sidebar width and you're done! (The second one must be negative! Or put it 0 if you don't mind it sliding along with sidebar)

Probably not gonna include this into the update solely due to the sizing. The other way feels hacky so not confident with that either.
I'm leaving this up in case anyone find this useful, and for future me if I found a more elegant way.

[Skylarzz]

It works like a charm right out of the box.
I tested it on both 3440×1440 and 1920×1200 resolutions, in both maximized and windowed modes. My left sidebar width is 350.

I think this feature has a lot of potential. If a bit more testing shows no issues, It’s worth considering adding this to the theme. I haven’t found any other CSS snippet, theme or plugin that offers such a smooth experience, no stuttering, and it doesn’t push the whole screen content around.

And I took the liberty of adding two lines of code so I could adjust the trigger width (those tricky multi-monitor setups make it way too easy for my mouse to fly right past that tiny 10px zone) or set it to a fade-out effect which I think goes nicely with Mado11's outline sidebar.

.workspace-split.mod-horizontal.mod-sidedock.mod-left-split:not(:hover) {
  opacity: 0.0;
  transition: opacity .0s ease-in-out;
}
.workspace-split.mod-horizontal.mod-sidedock.mod-right-split:not(:hover) {
  opacity: 0.0;
  transition: opacity .6s ease-in-out;
}

[hydescarf]

Aha, I forgot that other parts have fade-out transparency, that comes from me not touching the theme and css for months now lol.
Glad it work for you, but for this to go into theme settings there are a lot more to consider unfortunately:

• Time for me to develop. I have stated on the front page that this theme is now on maintenance mode, but I liked this so I made an exception for this :^)
• Mado 11 has a lot of options to fade or slide for some elements. I'm not sure if there's a hidden bug when user use this in options different than mine. So that means a quality-check is needed, and it's somewhat time-consuming as well. (there's a small visual defect now, btw, hopefully you don't notice it lol)
• The method of getting the size. Obsidian itself has a global css variable that named "--sidebar-left-width" or something similar, but it was for initial width, not resized width. Unless the dev make that syncs, having user to get the size through hoops isn't feasible. OR we just make user to input a fixed width of the sidebar just for this. Actually, this should work.
• The current way is done quick, but it's not the correct way. The correct way might not even need the width size at all, but I just have to replicate the background colors (and wave design if applicable) to the current sidebar or it'll have a transparent background. (Initially, I was worried that it'll affect the Translucent Windows, but now I remembered it was no longer available, so it's more doable now, but still means duplication)

That being said, yeah I really like this, but I'll only do this when I have the time, including the fade out effect, but no guarantee.
Thank you for the suggestion though!

Oh yeah, I noticed I missed something in the code, you might want to update the code, it's just to prevent worsening performance if any.