auto-hide channel list

[drifting arch]

for discussion:

[junior oyster]

can you do this for the member list aswell?

[waxen meadow]

this is actually my favorite implementation so far, nice work

[sudden turtle]

this is really nice. and I second the idea for the member list, would be awesome

[waxen meadow]

agreed!

[open bane]

@import url("https://minidiscordthemes.github.io/Snippets/ChannelListWidth/main.css");

/* Collapsable Sidebar */
.sidebar_e031be {
  transition: width 500ms ease;
}

:root:has(.tree__7a511) {
  --channellist-width: 0 !important;
}

:root:has(.tree__7a511:hover, .sidebar_e031be:hover) {
  --channellist-width: 280px !important;
}

It does the same thing, but its much more readable and intuitive 🙂

[barren blade]

It also doesn't work.

[open bane]

fixed. forgot import for variable.

[barren blade]

if you can make a second version of the code for serverlist instead it would be nice.

[open bane]

like not just the channels but the servers too, or just the servers?

[barren blade]

Both kinda work, but I meant the latter

[open bane]

/* Collapsable Channel List AND Server List */
:root:has(.tree__7a511) {
  --channellist-width: 0 !important;
  --serverlist-color: var(--primary-600)
}

:root:has(.tree__7a511:hover, .sidebar_e031be:hover) {
  --channellist-width: 280px !important;
  --serverlist-color: var(--primary-630)
}

.wrapper__216eb:not(:hover) {
  width: 12px;
  background-color: var(--serverlist-color) !important;
}

.wrapper__216eb * {
  opacity: 0;
}

.wrapper__216eb:hover {
  width: 72px;
}

.wrapper__216eb:hover * {
  opacity: 1;
}

/* Collapsable Channel List */
:root:has(.tree__7a511) {
  --channellist-width: 0 !important;
}

:root:has(.tree__7a511:hover, .sidebar_e031be:hover) {
  --channellist-width: 280px !important;
}

/* Collapsable Server List */
.wrapper__216eb:not(:hover) {
  width: 12px;
  background-color: var(--primary-630) !important;
}

.wrapper__216eb * {
  opacity: 0;
}

.wrapper__216eb:hover {
  width: 72px;
}

.wrapper__216eb:hover * {
  opacity: 1;
}

Here is all three!

[barren blade]

Thank you.

[open bane]

If you go with both it really leaves a lot of real estate

[barren blade]

the serverlist has 1 problem.

doesn't have any animation and also leaves a weird gray border if using themes

[open bane]

that might be a theming thing

[barren blade]

most likely is

[open bane]

it should work since it uses the default vars: --primary-600 and --primary-630

but i shouldve expected that

[barren blade]

just changed the primary 600 to background-secondary.

[open bane]

classic discord

[barren blade]

it worked.

but lacks an ease in and out animation.

[open bane]

that should be easy to add

[barren blade]

most likely

[open bane]

just add transition: width 300ms ease; to both .wrapper_216eb classes

.wrapper__216eb:not(:hover) {
  width: 12px;
  transition: width 300ms ease;
  background-color: var(--primary-630) !important;
}

.wrapper__216eb * {
  opacity: 0;
}

.wrapper__216eb:hover {
  width: 72px;
  transition: width 300ms ease;
}

.wrapper__216eb:hover * {
  opacity: 1;
}```

[barren blade]

I still miss collapsable UI from betterdiscord, made it also have shortcuts to open it with keys instead of just hovering.

but it was so lagy.

[open bane]

thats why i moved from bd to vencord

i couldnt handle the lag

[barren blade]

Everybody did for the same exact reason

[open bane]

it doesnt seem like theyve made any efforts to improve it

[fierce flare]

This.. still doesn't work

[barren blade]

try this one @fierce flare

[barren blade]

or these depending on what you are trying to get.

[fierce flare]

The collapse channel list doesn't work

womp womp

[open bane]

are you importing?

[fierce flare]

importing what

even with this it doesnt work

[open bane]

@import url("https://minidiscordthemes.github.io/Snippets/ChannelListWidth/main.css");

[fierce flare]

yeah no dice on vesktop

[open bane]

is it at the top of the css?

[barren blade]

considering the image, no it isn't.

[fierce flare]

oh

thats fixed it

rip

still has the issue with the original css

and idk whats cuasing it

if im not fully scrolled down in a channel, it will scroll up

Which as you can imagine, is pretty annoying!

It might be because of my discords width, but I can't exactly change that

[open bane]

@barren blade idk if this would also interest you since its on the topic of the sidebar but i made this 🙂

[barren blade]

I still prefer it not getting bigger.

[drifting arch]

oh wow! this is cool, for reference though, i chose to use attribute selectors bc i didn't want my css to break whenever they recompiled their css modules, that's also why i chose the funky nesting paths too

[fierce flare]

As much as I enjoyed this css, I found an odd issue where if I wasn't fully scrolled down in the channel and the channel list kept clapsing and opening, it kept scrolling up in chat, I don't know why

[drifting arch]

i did edit this css a little bit to fix a bug sorta like that, maybe you got the css before that?

[fierce flare]

Let me go attempt again and I'll see what happens

nope

still happens

[drifting arch]

is there any chance you could record what you're doing? bc i can't seem to reproduce it on my system

[fierce flare]

uhhh

ill see if my pcwants to record

[drifting arch]

okok

[fierce flare]

Uploading rn

no idea if a plugin could be causing this

or vesktop

[drifting arch]

huh that's awfully strange, it might be some combination of plugins and whatever css?

[fierce flare]

I could provide a export of my vencord settings and css to see if the issue is recreated?

[drifting arch]

sure lets try that

[fierce flare]

I use a portrait monitor (I recorded it on my main monitor) and as you can imagine this css is kind a godsend for having stuff fit

Here's a copy of the stuff I use

[drifting arch]

yeah similar stuff here, i use a tiling wm so i really really like the additional space when possible

[fierce flare]

It's just annoying when you're the one person experiencing that very niche bug

[drifting arch]

okay yeah it seems strange but it has to be vesktop, bc i cant reproduce it on vanilla discord + vencord

[fierce flare]

that makes.. no sense.. hm

[drifting arch]

that's what i would guess too, wait hold on lemme try something

AHA i got it to reproduce

[fierce flare]

good to know my discord isnt sentient

[fierce flare]

Any luck past this?

[drifting arch]

still debugging rn, im looking through which plugins you have enabled but still no luck

[fierce flare]

discord must be sentient

[drifting arch]

found it ! so its the consistent chatbar css snippet thing

once i turned it off the problem disappeared

[fierce flare]

thats super annoying cuz that looks nice

https://github.com/DaBluLite/css-snippets/blob/master/ConsistentChatbar/import.css

although its not complex

idk why it would be doing that

[fierce flare]

eitehr way thanks for heplin

helpin*

ill be on my way now

[drifting arch]

im thinking it's the position: static's?

anyways glad i could help :)

[fierce flare]

i have zero clue, but oh well, now we know and you know in the future if someone else has this issue

[drifting arch]

got it @fierce flare ! i kinda wanted to steal that from you, so i wanted to fix the css
and this version seems to work:

.wrapper__57349 {
  margin-bottom: 0;
  border-radius: 0;
  padding: 16.5px 0;
}
.form_d8a4a1 {
  padding: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}
.channelTextArea_c2094b {
  margin-bottom: 0;
  border-radius: 0;
}
.base__06abc {
  position: absolute;
  width: calc(100% - 16px);
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
  top: -24px;
  left: 0;
  background: var(--bg-overlay-chat,var(--background-primary));
}
.base__06abc > .cooldownWrapper__193b2 {
  margin: 0;
  position: static;
}
/*.scroller_e412fe {
  position: static;
}*/
.scrollableContainer_ff917f {
  border-radius: 0;
}
.scrollableContainer_ff917f > .inner__9fd0b {
  min-height: 53px;
  align-items: center;
}
.attachWrapper_d01704 {
  display: flex;
  position: static;
  align-items: center;
}
.attachedBars_c1606a {
  border-radius: 0;
}

all i really did was comment out that scroller piece and boom it works now

not really sure why that's there anyways

[fierce flare]

perhaps maybe put that as a pull request on the github? or just ping them here

better than shoving it into my quickcss

but appreciate figurign it out

[drifting arch]

@fair sun i would pr on github, but i have no idea why this is here anyways, i assume it's for a good reason?

[drifting arch]

also update: took some of the improvements from people in this channel, and fix the bug where right-clicking any of the channels made the sidebar disappear

[fair sun]

uhh

sorry for the late response, was busy with exams

[fierce flare]

I understand the feeling

[fair sun]

so, you might have fixed an issue that I had with Cyan 2

where it would jump the chat because there were unread messages

also, what's your gh

[fierce flare]

as far as I can see the snippet creators github is in their discord account connections btw

[fair sun]

oh, bruh

I should start looking at usernames

[fierce flare]

lmao it's chill

i just discovered the issue, nothing more

[drifting arch]

oop sorry y'all for not responding, but yeah my gh is in my discord connections

[fierce flare]

@drifting arch

[drifting arch]

oh! alright nice, thanks dablulite :)

[fierce flare]

This was just removed. making it all work fine, so its all good now!

[keen yew]

Freedom at last, migrating from DB here, i was wondering if anyone had a snippit to make the member list in servers collapse

Did a quick search and couldnt find

Same kind of behavior where it shows up after you hover

[sudden turtle]

made this quickly

div[class^=base] > div[class^=content__] div[class^=content__] > div[class^=container_] {
    transition: width 0.4s ease;
    width: 60px;
}
div[class^=base] > div[class^=content__] div[class^=content__] > div[class^=container_]:hover {
    width: 240px !important;
}

doesn't work in threads, too lazy to fix that because I only care about channels

[keen yew]

Works perfect!

[fierce flare]

What's different to the regular one?

[sudden turtle]

it's for the members sidebar, not the channels

[fierce flare]

oooh

I'll combine the two then, appreciated

[fierce flare]

actually on forum channels its cooked

it massively overextends

[sonic sandal]

Can u update to keep the channel list when we do action like editing channels orders/create category etc ?

[open bane]

im not sure there is a way if the user isnt hovering

[sonic sandal]

Oki let me know if u finda way to doit

[drifting arch]

oh did i not post the version that allows that?

:root {
    --channel-list-width: 0px;
}

:root:has([aria-label="Thread Actions"], [aria-label="Channel Actions"]) {
    --channel-list-width: 240px !important;
}

:root:has([aria-label="Private channels"]):has([aria-label="User Settings Actions"]) {
    --channel-list-width: 240px !important;
}

:root:has(div[class^=sidebar]:hover, [aria-label="Servers sidebar"]:hover) {
    --channel-list-width: 240px !important;
}

div[class^=base] > div[class^=content__] > div[class^=sidebar] {
    width: var(--channel-list-width);
    transition: width 0.4s ease;
}

this one doesn't have a collapsable server list tho, that should be easy enough to add however

[open bane]

it doesnt work if you right click on the server list

[drifting arch]

iirc that was impossible to distinguish between the serverlist user popup and the one in dms, maybe?

wait no ignore me, i misunderstood your message

i mean you'll have to look in the code for the server list popup and add it, it shouldn't be too difficult

[near frost]

could someone update this?

it just stays hidden now 😕

[open bane]

Add to top of file

/* Converts sidebar to easy-to-use --channellist-width var */
@import url("https://minidiscordthemes.github.io/Snippets/ChannelListWidth/main.css");

Add anywhere else (credit: @drifting arch)

:root {
  --channellist-width: 0px;
}

:root:has([aria-label="Thread Actions"], [aria-label="Channel Actions"]) {
  --channellist-width: 280px !important;
}

:root:has([aria-label="Private channels"]):has([aria-label="User Settings Actions"]) {
  --channellist-width: 280px !important;
}

:root:has(div[class^="sidebar"]:hover, [aria-label="Servers sidebar"]:hover) {
  --channellist-width: 280px !important;
}

div[class^="base"]>div[class^="content__"]>div[class^="sidebar"] {
  transition: width 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

Will stay persistent when channels are right-clicked too 🙂

[devout heron]

Condensed version, adds non-English, more right-click menus, and tab nav support:

@import url("https://minidiscordthemes.github.io/Snippets/ChannelListWidth/main.css");

:root {
    --channellist-width: 0;
}

:root:has(#thread-context, #channel-context, #guild-context, #guild-browse-channels-context-menu, #audio-device-context, #user-settings-cog, #account),
:root:has([class^="privateChannels_"]):has(#user-context),
:root:has(:is([class^="sidebar_"], [class*="guilds_"]):is(:hover, :focus-within)) {
    --channellist-width: 280px;
}

[class^="sidebar_"] {
    transition: width 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

[devout heron]

Use of ChannelListWidth is great if you're setting the "opened" width to anything other than the default Discord's 240px. Otherwise I'd just go for something simple and performant similar to the original (skipping recalculating the banner size and buttons on the fly).

:root:has(#thread-context, #channel-context, #guild-context, #guild-browse-channels-context-menu, #audio-device-context, #user-settings-cog, #account),
:root:has([class^="privateChannels_"]):has(#user-context),
:root:has(:is([class^="sidebar_"], [class*="guilds_"]):is(:hover, :focus-within)) {
    --visiblechannellist-width: 240px;
}

.sidebar_e031be {
    width: var(--visiblechannellist-width, 0);
    transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1);

    .container__7e23c {
        width: 240px;
    }
}```

[topaz pagoda]

hello, when update? @drifting arch

[drifting arch]

:root:has(#thread-context, #channel-context, #guild-context, #guild-browse-channels-context-menu, #audio-device-context, #user-settings-cog, #account),
:root:has([class^="privateChannels_"]):has(#user-context),
:root:has(:is([class^="sidebar_"], [class*="guilds_"]):is(:hover, :focus-within)) {
    --visiblechannellist-width: 240px;
}

.sidebar_a4d4d9 {
    width: var(--visiblechannellist-width, 0);
    transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sidebar_a4d4d9 .container_ee69e0 {
    width: 240px;
}

this is what i've been using

a combination of a few things in this channel

[topaz pagoda]

Thanks sir, goodjob

[oak yew]

I like this

I like the bezier curve

[open bane]

That’s my bezier curve 😎

[oak yew]

good work brotha I enjoy that change

[open bane]

i just noticed that the menu shows when you hover on the settings sidebar

i also have my settings page as a modal so that's probably why it's gone unnoticed

oh it fixed itself somehow

[dusk forge]

it broke again...

[open bane]

@dusk forge this is working fine for me

[shy lion]

Should I just copy and paste this to console?

wait... is this usable only in browser?

[open bane]

No you just need to add it to your quick css

It should be the cat icon in the top right

[plain coral]

how can i change the hitbox size of the server channel list

[lavish plinth]

awesome find, i know nothing about css but i just combined this with someone's server hover

Servers collapse animation ( @inland talon #🎨-css-snippets message) + @drifting arch 's auto hide channels code from above

/* Hover Channels */
:root:has(#thread-context, #channel-context, #guild-context, #guild-browse-channels-context-menu, #audio-device-context, #user-settings-cog, #account),
:root:has([class^="privateChannels_"]):has(#user-context),
:root:has(:is([class^="sidebar_"], [class*="guilds_"]):is(:hover, :focus-within)) {
    --visiblechannellist-width: 240px;
}

.sidebar_a4d4d9 {
    width: var(--visiblechannellist-width, 0);
    transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.sidebar_a4d4d9 .container_ee69e0 {
    width: 240px;
}


/*Hover Servers */
[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;
}

[lavish plinth]

Hover servers ( @inland talon #🎨-css-snippets message) + sandwhich menu channels ( @woeful knot #🎨-css-snippets message )

@import url("https://lazuee.github.io/css-snippets/discord/channel-list-toggle/import.css");

/* Hide channels with sandwhich menu like mobile */
:root {
  /* icon size must be 25x25 */
  --channel-list-toggle-icon-light: url("data:image/svg+xml,%3Csvg width='25px' height='25px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.00092H21M3 12.0009H21M3 18.0009H21' stroke='%23181818' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3CclipPath id='clip0_429_11066'%3E%3Crect width='24' height='24' transform='translate(0 0.000915527)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  --channel-list-toggle-icon-dark: url("data:image/svg+xml,%3Csvg width='25px' height='25px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.00092H21M3 12.0009H21M3 18.0009H21' stroke='%23eee' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3CclipPath id='clip0_429_11066'%3E%3Crect width='24' height='24' transform='translate(0 0.000915527)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  /* if the icon size isn't 25x25, you have to set the margin to make it centered */
  /* top, right, bottom, left */
  --channel-list-toggle-icon-margin: 11px 0px 0px 24px;
}


/* Hover Servers */
[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;
}

[lavish plinth]

@drifting arch not sure if you still use this but i combined a few things if u wanna look at them

[drifting arch]

cool stuff! in all honesty tho i like the server list being there and not collapsible

[lavish plinth]

yeah i think i prefer that too. trying to find which one i can easily get used to though

[woeful knot]

ohh, looks like channel-list-toggle-icon-dark didn't work,.

fixed.

[oak yew]

why does it not worky anymore

[blissful yew]

discord probably pushed another update. if any smart person here can fix this pls @ me tysm <3

[sudden turtle]

I have this version I maintain for myself, sometimes it bugs out a little bit and I'm too lazy to fix it as long as it somewhat works, but I fixed it for this newest update. it also hides the member list tho, so if you don't want that you can copy the parts you want into your quickcss

https://raw.githubusercontent.com/rechington/Discord-Mods/main/collapsable sidebars.css

[oak yew]

@blissful yew check it out boss

works well I'd say

[blissful yew]

Will check it out tysm

[modern leaf]

Thanks for this

[blissful yew]

is there a way to completely hide the channels tab?

[fierce flare]

Adjust it to 0px, what I did, so when you hover over the server list it still shows

you'd have to add it via quickcss

[blissful yew]

set what to 0px?

[fierce flare]

if you open it

do you see here how it says

48px!important

i just made it zero

which should do what you expect

[blissful yew]

ye i tried to do that, but when i do that its really hard to open list without my curser going to my 2nd monitor

and my server list is also at the top

[fierce flare]

Works for me, Iunno what to tell you, as I don't accidentally flick to my monitor

[blissful yew]

yes bc your server list is at the left side of your monitor... (when you hover on server list it will open the channel tab)

[fierce flare]

mhm

[fierce flare]

Still, if you set this to 0px, it'll entirely hide the channelsl ist

[blissful yew]

but then i cant open it...

[fierce flare]

but you asked

[blissful yew]

ye ik, but i still want to be able to open my channel tab...

thats why i asked

[fierce flare]

i just rely on the fact that when I hover over the server list it shows,apart from that I can only think of having it on like 5px or something tiny

[blissful yew]

also tried something similar but its really annoying hitting that small hit box without over shotting

[fierce flare]

@sudden turtle got any idea for this person? As I'm unsure.

[blissful yew]

this is how i did that before new update, idk if this helps 🤷
(not my code)

:root:has(#thread-context, #channel-context, #guild-context, #guild-browse-channels-context-menu, #audio-device-context, #user-settings-cog, #account),
:root:has([class^="privateChannels"]):has(#user-context),
:root:has(:is([class^="sidebar"], [class="guilds_"]):is(:hover, :focus-within)) {
    --visiblechannellist-width: 240px;
}
.sidebar_a4d4d9 {
    width: var(--visiblechannellist-width, 0);
    transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.sidebar_a4d4d9 .container_ee69e0 {
    width: 240px;
}```

[sudden turtle]

sorry not sure, it should already open when you hover the server list then stay open when you go over the channel list. if the server list is somewhere else and you can't go from one to the other it would be more work to make it work

[blissful yew]

i see..

if any other smart person could help i will really appreciate it

[final coral]

is there a way to get rid of the "new unreads" popup?

starts to look a bit messy with low width

[drifting arch]

just noticed that the script here broke, so here's the current version i've been using

:root:has(#thread-context, #channel-context, #guild-context, #guild-browse-channels-context-menu, #audio-device-context, #user-settings-cog, #account),
:root:has([class^="privateChannels"]):has(#user-context),
:root:has(:is(.sidebar_a4d4d9, .guilds_a4d4d9):is(:hover, :focus-within)) {
    --visiblechannellist-width: 240px;
}
:not([i]):not([i]):not([i]) .sidebar_a4d4d9 {
    width: var(--visiblechannellist-width, 0) !important;
    transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.sidebar_a4d4d9 .container_ee69e0 {
    width: 240px;
}

[past zinc]

sorry for the ping but this has been broken on pre visual refresh for quite a while, what do I look out for instead to fix that

[pastel karma]

fix when o algo

[drifting arch]

forgot to post the fix here

:root:has(#thread-context, #channel-context, #guild-context, #guild-browse-channels-context-menu, #audio-device-context, #user-settings-cog, #account),
:root:has([class^="privateChannels"]):has(#user-context),
:root:has(:is([class^="sidebar_"], [data-list-id="guildsnav"]):is(:hover, :focus-within)) {
    --visiblechannellist-width: 240px;
}
:not([i]):not([i]):not([i]) [class^="sidebar_"] {
    width: var(--visiblechannellist-width, 0) !important;
    transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[class^="sidebar_"] [class^="container__"] {
    width: 240px;
}

also bc you asked about it, posted the updated version @pastel karma

[past zinc]

Tyvm

[pastel karma]

thx