Auto-Hide Floating Sidebar

[stuck flax]

very nice thank you! pleaseee make it for member list too.. ❤️

[torpid prism]

Sure thing here you go:

.membersWrap_c8ffbb::-webkit-scrollbar {
  display: none !important;
}

.membersWrap_c8ffbb {
  --paddingY: 15px;
  position: absolute;
  z-index: 100;
  top: 50%;
  max-height: 70vh;
  overflow-y: auto;
  right: 0%;
  transform: translate(95%, -50%) !important;
  transition: all 0.3s ease;
  border-radius: 20px;
  padding-top: var(--paddingY);
  padding-bottom: var(--paddingY);
  border: 2.2px solid #242424;
  box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 5px;
  height: 10vh;
}

.membersWrap_c8ffbb:hover {
  transform: translate(0%, -50%) !important;
  height: auto;
}

[crisp wave]

Sickkkkk!

but its kinda hard to use for me because i have a monitor on the left, and i have to precisely hover over there without moving my mouse to the other monitor, which can be fixed by adding a slight delay for hiding it or something

[torpid prism]

You see this line transform: translate(-90%, -50%) !important; change the -90% to numbers like -85% or whatever makes it easier for you to select it

[crisp wave]

Tysm!

[torpid prism]

you're welcome ❤️

[stuck flax]

thank you so muchh! love it!

[sleek aspen]

Can u make this compatible with the betterfolders plugin if possible?

[modest veldt]

I tried this on midnight background theme (creator by refractor)
but this hides the member list but nothing happens when i hover over it 😦

[crisp wave]

ur theme overwrites this code

[modest veldt]

Oh, I'll see what i can do to fix it 🙂

[crisp wave]

it also has this issue when your using a discord theme which is alright honestly doesnt bother me much but why not mention it

[torpid prism]

I tried to fix this issue but honestly I can't wrap my head on why it happens that's why I don't think I can fix it your best bet is to wait for someone smarter to get involved

[torpid prism]

You could try and add !important to anything though not sure if that'd work

[crisp wave]

when you remove the padding it fixes it

one second

nav[class*="guilds"]::-webkit-scrollbar {
  display: none !important;
}

nav[class*="guilds"] {
  --paddingY: 15px;
  position: absolute;
  z-index: 100;
  top: 50%;
  max-height: 70vh;
  overflow-y: auto;
  transform: translate(-80%, -50%) !important;
  transition: all 0.3s ease;
  border-radius: 20px;
  border: 2.2px solid #242424;
  box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 5px;
  height: 10vh;
  /* 1 */
  background-color: var(--background-secondary-alt);
}

nav[class*="guilds"] div {
  transform: scale(0);
}

nav[class*="guilds"]:hover {
  transform: translate(0%, -50%) !important;
  height: auto;
}

nav[class*="guilds"]:hover div {
  transform: scale(100%);
}

.membersWrap_c8ffbb::-webkit-scrollbar {
  display: none !important;
}

.membersWrap_c8ffbb {
  --paddingY: 15px;
  position: absolute;
  z-index: 100;
  top: 50%;
  max-height: 70vh;
  overflow-y: auto;
  right: 0%;
  transform: translate(95%, -50%) !important;
  transition: all 0.3s ease;
  border-radius: 20px;
  border: 2.2px solid #242424;
  box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px 5px;
  height: 10vh;
  /* 2 */
  background-color: var(--background-primary);
}

.membersWrap_c8ffbb:hover {
  transform: translate(0%, -50%) !important;
  height: auto;
}

/* --- FIXES --- */

/* 3 */
.theme-dark .container-2cd8Mz,
.membersWrap_c8ffbb .container_cbd271 {
  background-color: transparent !important;
}

/* 4 */
nav[class*="guilds"] div[class*="scroller_"],
.membersWrap_c8ffbb .container_cbd271 {
  padding-top: var(--paddingY);
  padding-bottom: var(--paddingY);
  box-sizing: border-box;
}

check this, its also with the memberlist

also when you open a profile in the member list, the memberlist disappears ofc and the profile just stays floating in the middle of nowhere theres 2 fixes to this
1 - make the memberlist close only when you close the profile
2 - make the memberlist close when you click on a profile and the profile itself moves to the right

[torpid prism]

Thank you for this I genuinely couldn't have figured this out

[crisp wave]

thank my cousin haha

i just showed him the problem specifically

[subtle frost]

i like how this is being done but for some reason it breaks how i have my folders done

this is how it looks with the snip

[crisp wave]

yeah same it doesnt support the server icons inside the folders

[torpid prism]

I'm not really sure why this happens nor do I know how to fix it but if I really had to guess I'd assume it's something to do with these lines:

nav[class*="guilds"] div {
  transform: scale(0);
}

nav[class*="guilds"]:hover div {
  transform: scale(100%);
}

considering this is one of the only lines that modifies things inside the sidebar itself rather than the sidebar alone

[subtle frost]

heres the css i did for the folders

/* Plain Folder Icon Size Pastel */
.expandedFolderIconWrapper__48112::after,
.folderPreview__48112::after {
  content: "";
  background-color: #fff;
  width: 24px;
  height: 24px;
  top: 60px;
  right: 12px;
  position: absolute;
  clip-path: path("M20 7H12L10.553 5.106C10.214 4.428 9.521 4 8.764 4H3C2.447 4 2 4.447 2 5V19C2 20.104 2.895 21 4 21H20C21.104 21 22 20.104 22 19V9C22 7.896 21.104 7 20 7Z");
  transition: opacity 0.2s ease;
}
.folderPreview__48112:hover::after {
  opacity: 0;
}
.folderPreview__48112 > .folderPreviewGuildIcon__48112 {
  opacity: 0.5;
  filter: blur(2px);
  transition: opacity 0.2s ease, filter 0.2s ease !important;
}
.folderPreview__48112:hover > .folderPreviewGuildIcon__48112 {
  opacity: 1;
  filter: blur(0px);
}
.theme-dark .hiddenVisually__27f77[aria-expanded="false"] {
  background-color: #000000;
}
.theme-light .hiddenVisually__27f77[aria-expanded="false"] {
  background-color: #777777;
}```

[crisp wave]

hmm

its still the same for me

oh is that specifically for the theme ?

[torpid prism]

I think what he meant is that's the snippet to get the folders looking like what he had before using my snippet

[crisp wave]

yeah but it doesnt do it

at least for me

[torpid prism]

i genuinely dont think i can fix it no matter what code you send because no matter what there'll be a theme that'll break and I don't plan on making it work for every theme out there

[crisp wave]

thats true honestly, you defiantly dont have to, its just good now for the default themes thats enough

[subtle frost]

yeah i just find it weird why it changes how the folders are styled

[stuck flax]

i wonder,
if i turn on the hide member list..
can we still able hover the member list? or is it possible?
or is there any snippets for that? xD

[crisp wave]

it hides it

Memberlist ON

Memberlist OFF

and its dumb honestly theres no point of having the button to hide or keep it since its hidden anyways

ill try to remove the button and keep it always on

[crisp wave]

/* Hides the show memberlist button if its on, */
.selected__9293f {
  display: none !important;
}

[wise slate]

This causes the message area to take up more space, and the upload items button overlaps with the mute/deafen/settings area for me.

This could be because I'm using the web version of discord but I'm just putting it out there.

[brazen topaz]

looks sleek asf w my own little tweaks

[subtle frost]

i fixed it

changed this

nav[class*="guilds"] div {
  transform: scale(0);
}

to this

nav[class*="guilds"] .wrapper__9916c,
nav[class*="guilds"] .listItem__48528:not(.folderPreview__48112):not(.expandedFolderIconWrapper__48112) {
  transform: scale(0) !important;
}

only thing im trying to fix now is the padding to match like the bottom

[crisp wave]

Oooo thats sick

Ill check it out when o get back home

[deep rose]

You're the goat, i was gonna ask the same thing ! (Btw, the box-shadow for the members list, the first pixel offset has the be -5px ( -5px 5px 5px 5px; )

[neon comet]

I have the problem of the small mac icons on the top left 😭

[crisp wave]

i dont have mac your gonna have to figure that out yourself haha

[neon comet]

working on it hehe 😆 (prob something to do with the theme)

[tough siren]

is there a way to smoothly change the height of the little bar to the max-height when hovering? cause when you hover over the member list it just instantly extends to the max-height and it would be a lot cooler imo if it would smoothly scale to it

[torpid prism]

The way I have it even become little in the first place is hiding what's inside the bar so whenever you hover over it they all appear which then makes it take on the full size so having it smoothly move over to the new size means you'd have to animate every element inside that bar to slowly come in one after another or slowly grow in size

and having tried that it either looks very bad or lags out your discord to an ungodly level

there's most likely better ways to pull this off tho i dont know how

[tough siren]

hm

i see

also i found a bug just now

when viewing a thread like this one, the member list is at its max-height

but it should be smol

and also the transition doesnt work in threads

[lilac zealot]

interesting

[lilac zealot]

um.. server list didnt appear when the window isnt maximized

[lilac zealot]

oh nvm, this was the fix

[neon comet]

the solution I found was fixing the height of the buttons, wasn't a great solution but was enough

[worthy canopy]

sheesh! I am loving this! would it be possible to use with BetterFolders?

[worthy canopy]

hey! really like how that's looking. could you please share the tweaks you made?

[woven cosmos]

thats so sick

[native marlin]

For those interested, I modified the bar, with an effect when you click on a server, and a pulsing effect on the edge of the bar

[brisk beacon]

@torpid prism would it be possible to make it so, that when someone sends you a DM the little bar that you hover on to open the side panel turns red for example? this way you know you got a notification

[torpid prism]

probably but my knowledge is very limited i made this snippet with duct tape, hopes & prayers so you might want to ask someone actually smart in this topic

[brisk beacon]

I see, thank you for the reply

[native marlin]

try this

[brisk beacon]

thank you mon ami

[feral void]

how do I make the background transparent?

[molten bramble]

I have found an issue that is quite strange.

Normally, for some reason, my chat bar has this:

But if I remove the } in this section, it goes away.
{
--paddingY: 0px;
position: absolute;
z-index: 100;
top: 50%;
left: 0;
max-height: 91vh;
overflow-y: auto;
transform: translate(-85%, -50%);
opacity: 0.8;

/* Transitions organiques */
transition:
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.5s ease,
box-shadow 0.6s ease;

/* 🌫️ Glassy + blur */
background: rgb(1, 1, 1);
backdrop-filter: solid(12px);
-webkit-backdrop-filter: solid(12px);

border-radius: 20px;
padding-top: var(--paddingY);
padding-bottom: var(--paddingY);
border: 2.2px solid #252427;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
height: 100vh;
}||

I honestly have no clue why, and removing any part in the code within the {} area doesn't get rid of it.

[molten bramble]

Even if I use the code from this, the issue is still there.

[zealous pivot]

man the only bug is when openeing a folder the sidebar comes back, and to see the actual servers in the folder ytou have to unhover and rehover

[brisk beacon]

the glow stopped working suddenly

[native marlin]

i have no problem for me .. :/

[brisk gulch]

im finding some 'small issues' with this
you.. can't really change the background of the memberlist to any extent, i'm not sure if the memberlist's 'background' even counts as a background, as trying to write any css for it just shows what appears to be a border around the screen corresponding to that color (here's the css, the background color should be white, it isnt, atleast slightly)

[fervent pilot]

I'm a dumb person

I can't scroll..

and it kinda buggy when hovering

[fervent pilot]

I'm using system24 theme

[crisp wave]

members bar dont work no more

@torpid prism can you check what changed pls ;D

[deep rose]

Here's what changed

[crisp wave]

perfect fixed, thank you!!

[deep rose]

You can fix the @import ones too, Put the ilnk in the browser, copy the CSS
Paste it in the fixer
paste the corected version in your QuickCSS (and get rid of the @import