**Server list collapse animation**

[random basin]

^ this but it overlays instead of shifting the whole app (was noticeably slow for me)

[class*=" guilds__"] {
    transition: transform 0.4s ease 0.1s;
    position: absolute;
    inset: 0;
    z-index: 10;
}

[class*=" guilds__"]:not(:hover) {
    transform: translateX(-71px);
}

[prime gorge]

both of these break betterfolders, just FYI, they make a gray bar on the left side of the screen but it doesn't expand the...ok, correction.
the original breaks betterfolders and only shows the normal sidebar, the hover version only shows the open betterfolder

[bold elk]

https://tenor.com/view/diagnosis-skill-issue-diagnosis-skill-issue-draker-discord-gif-22231351

[storm garden]

also it does work with better folder, the server list is on the left side of the bar, the open folders are on the right side of the bar

though for some reason something made it so i cant scroll anymore

also would it be possible to make it so the direct messages icon shows up always?

[prime gorge]

uh.. what
it doesn't work for me idk what you mean
it won't show both sidebars

[bold elk]

probably

[storm garden]

do you know how ?

[bold elk]

i could figure out how but im not gonna lol

should be simple though

[random basin]

could prolly position: absolute the guild icon n it should work

or position: fixed idk if the scrolling of the sidebar affects it

[terse igloo]

i found it's important to set the z-index higher than 100, as animated server banners (like in the vencord server) have a z-index of 100 for some reason and will collapse the server bar if you pass over them

[devout acorn]

fixed it thanks to you + made the overlay fully go away because it wasn't doing that for some reason

[class*=" guilds__"] {
    transition: transform 0.4s ease 0.1s;
    position: absolute;
    inset: 0;
    z-index: 125;
}

[class*=" guilds__"]:not(:hover) {
    transform: translateX(-80px);
}

[terse igloo]

I actually have mine marginally out from the side to give a little extra area to hover

Though I set the opacity of mine to 0 when not hovering

I'll share my edit once I hop on my PC (I made a few changes)

[devout acorn]

oh, nice

[terse igloo]

Though some of the changes I made may be a bit laggier because I'm using backdrop-filter: blur()

On my PC it still runs better than the original though

[terse igloo]

alright, on my pc now
here's my edit

/* hide server bar */
[class*=" guilds__"] {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, 
                opacity   0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    position: absolute;
    inset: 0;
    z-index: 256;
    background-color: #02020270;
    backdrop-filter: blur(12px);
    padding-inline: 4px;
}

[class*=" guilds__"]:not(:hover) {
    transform: translateX(-74px);
    opacity: 0;
}```

[random basin]

u can convert the transition into transition-property/duration/timing-function to reduce repetition if u want

not on pc rn otherwise i would send

transition property would be ‘transform, opacity’ n then timing function would jus be the cubic bezier thing

[terse igloo]

ik, i didn't change a lot from the base script

also if you're having lag issues, you can lower the blur() radius in backdrop-filter (though it won't look as aesthetic)

you can also try other filters like invert, grayscale, or sepia and those'll work too

oooh that's funky (using backdrop-filter: invert(100%))

the cubic-bezier function btw is just an expo ease

[terse igloo]

okay removing the background color and adding a slight saturate gives it more like a "frosted glass" kind of look
here's some cleaner code:

/* hide server bar */
[class*=" guilds__"] {
    position: absolute;
    z-index: 256;
    inset: 0; /* stretch to bottom of screen, remove if you want a finite sidebar (border-radius recommended) */
    padding-inline: 4px; /* space around sides, adjust to your liking */

    /* sidebar background */
    /* set up to give a "frosted glass" effect */
    background-color: transparent;
    backdrop-filter: blur(16px) saturate(120%);

    /* exponential ease-out on position and opacity */
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, 
                opacity   0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

[class*=" guilds__"]:not(:hover) {
    --offscreen: -80px; /* amount needed to fully remove sidebar from view */
    --hover-margin: 8px; /* margin on the side of screen that pops out sidebar */
    
    transform: translateX(
        calc(var(--offscreen) + var(--hover-margin))
    );
    opacity: 0; /* comment this out to preview the margin */
}```

if you want to make a floating sidebar, add these to the first block:

inset: 1;
border-radius: 24px;
padding-block-end: 4px; /* same as padding-inlne */```

[random basin]

this code has rly evolved since sam posted it n i made it an overlay instead

awesom

i had something similar to that frosted glass locally its cool

[wooden spear]

btw this code didn't work again after vencord broken

[wooden spear]

no solution for this code?

[alpine lintel]

removing the __ from [class*=" guilds__"] works for me, for example:

[class*=" guilds"] {
    width: 10px;
    transition: width 0.2s ease 0.1s, opacity 0.2s ease 0.1s;
    opacity: 0;
}

[class*=" guilds"]:hover {
    width: 65px;
    opacity: 1;
}```

[random basin]

ya the classes got reshuffled and there’s only one underscore now i think