channel-list-toggle

[cold ravine]

This only works on chromium version that supports @container style

You can use it on Vesktop or any latest chromium browser...

added --channel-list-toggle-icon variable to change the toggle icon.
added --channel-list-toggle-icon-margin variable to adjust the toggle icon margin, if the icon size isn't 25x25.

root variables:

:root {
    --channel-list-toggle-icon: 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%3Cg clip-path='url(%23clip0_429_11066)'%3E%3Cpath d='M3 6.00092H21M3 12.0009H21M3 18.0009H21' stroke='%23eee' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_429_11066'%3E%3Crect width='24' height='24' fill='white' transform='translate(0 0.000915527)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --channel-list-toggle-icon-margin: 11px 0px 0px 6px
}

[cold ravine]

To encode svg: https://yoksel.github.io/url-encoder/

[cold ravine]

removed background color behind toggle icon...

[limpid gorge]

this is really nice but for some reason its making my discord lag really really hard

[cold ravine]

hmm,. I minified the css, i think this should improve performance.

Do ctrl + F5 to reset cache.

[cold ravine]

@limpid gorge the snippet is now fixed, it wouldn't affect the performance,.

[cold ravine]

^

[limpid gorge]

ill give it a shot

yeah that performs a lot better now nice work

now I can finally use this over the other snippet I used

[cold ravine]

[wispy steppe]

can you make it animated instead off snap

[cold ravine]

https://tenor.com/view/nuh-uh-gif-18399658447366638577

[wispy steppe]

Why

[limpid gorge]

Animate it yourself 🥺

[uncut hemlock]

https://tenor.com/view/gigachad-chad-gif-20773266

[wispy steppe]

I'm dumb

[covert mica]

Appears to be broken with Favorites.

[cold ravine]

hmm,. how you do that Favorites thing? is it plugin?

[covert mica]

its an experiment

Specfically this one

[cold ravine]

fixed..

[covert mica]

Yup, works perfectly now.

[barren arch]

doesn't function on other languages - switched from spanish to english to check some things and suddenly the channel list was collapsed lol

[cold ravine]

lol, I didn't know that aria-label text also translated when switching language.

fixed. try ctrl + F5 to reset cache..

[barren arch]

lol yea I have some css to hide the gift button and it's multiple langs
will check in a bit when on PC again, thanks!

[flat prism]

Is there a way that you could make it so that when the side bar is expanded there is a dedicated button to close it instead of it closing when the side bar isnt in focus? or do you know if someone else has made a snippet that makes the side bar toggleable with a dedicated button?

[cold ravine]

New update

• Fixes Direct Message sidebar, added light/dark mode toggle icon, and set the default toggle icon as optional.

Variables

• --channel-list-toggle-icon-light: sets the light mode toggle icon of the channel list.
• --channel-list-toggle-icon-dark: sets the dark mode toggle icon of the channel list.
• --channel-list-toggle-icon: sets the default toggle icon of the channel list without light/dark mode. (optional)
• --channel-list-toggle-icon-margin: sets the toggle icon margin, if the icon size isn't 25x25.

[cold ravine]

New Update:

• Fixed the "Happening Now" container in the sidebar.
• Excluded the right chat in the Voice channel from the margin-left adjustment.
• Fixed the header in the Direct Message chat.

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

: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;
}

[elder trellis]

love, thanks

really useful on mobile

[elder trellis]

@cold ravine this has weird behaviour with desktop refresh lol

[uncut hemlock]

I assume since it’s still experimental that that’s going to be normal, also it’s very hard to write code for that seeing as how discord changing it so Id disable it

[elder trellis]

ye i did

[cold ravine]

i'll check it later. thanks for the feedback

[elder trellis]

yopper

[elder trellis]

its probably bugging at [class^="scroller_"] > ul > {} thing

[cold ravine]

did you enable an experimental feature?

i can't reproduce the bug you've encountered..

maybe your css is overriding the snippet,.

[elder trellis]

yeah its currently an experiment but i turned it off

[cold ravine]

what experimental feature did you enable?

[elder trellis]

its called "Desktop Refresh"

[cold ravine]

hmm

[elder trellis]

you can probably ignore it for now until the day Discord makes this experiment the default layout

[cold ravine]

lol, desktop refresh isn't good. my theme looks way better than this..

[cold ravine]

https://github.com/lazuee/css-snippets/commit/b761c717f0def032e7d8e80cc1163b23997d1313

channel-list-toggle