Another version but on Channel list with

[raven turret]

i cant click the settings icon

halp

ok i got rid of it by accessing settings menu via dms list

[young knoll]

hmmm,.

[young knoll]

can't reproduce this..

[raven turret]

i think

its the custom css

for makin the 4 buttons

[young knoll]

ooh,. looks like when joining in vc..

[young knoll]

done, let me know if you like the changes.

[raven turret]

hmm i dont get those buttons while on call

@young knoll any chance u can also show people in vc

[young knoll]

i will.

@raven turret done.. try

[raven turret]

well i cant click the settings button again

ill try later when im less busy

[solemn pewter]

two things. looks nice. and functions mostly correctly. but i also have the clicking setup does nothing.
also i'm trying to modify it to be on hover. but it's not staying hovered when i go over my status stuff or the spotify now playing bar. could you help me with that?
btw no rush do what you gotta do.

[young knoll]

i think it because of how i set the focus-within to be in nav.

<sidebar>
    <nav aria-label="(server)">
    </nav>
    <section aria-label="User Panel"></section>
</sidebar>

if nav has been focused, then the sidebar width will set with the variable width.

so, the problem here is the sidebar:has(nav:focus-within). because :focus-within is in nav and not the section.

that's why whenever you click "User Panel". the sidebar will go back because nav isn't focused.

[obtuse rover]

cant access discord settings with this

[young knoll]

yea,.because I use :focus-within that's why it can't active the buttons on User Panel when clicking..

[young knoll]

done. it's working now.

https://lazuee.github.io/css-snippets/discord/channel-list/import.css

[eternal shale]

bro can you guide a lil bit abt how to use it?

[young knoll]

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

[eternal shale]

bro i didn't understand. Where do I have to put this code?

[young knoll]

... search it on Google,..

[nimble abyss]

just seeing this now while looking for something just put it in your quick css at the top if you havent already

@young knoll is there a version you could make where each will open on hover? im finding it a bit tedious to click on each part every time for them to open

[young knoll]

I don't like using hover,. you can just replace the focus-within to hoverif you want..

[nimble abyss]

(im guessing i have to make a fork of it right?)

[young knoll]

it's up to you.

[tranquil vector]

@young knoll Is this a typo? https://github.com/lazuee/css-snippets/blob/ae5c544a252fd0d259eb60e6ee0ccc729769eb24/discord/channel-list/import.css#L22

[frozen epoch]

**import.css: **Line 22

[class*="sidebar_"]:has([aria-label*="(server)"]):not(focus-within)>*>*>* {

[tranquil vector]

No colon on that focus-within.

Same thing in sidebar-dm: https://github.com/lazuee/css-snippets/blob/ae5c544a252fd0d259eb60e6ee0ccc729769eb24/discord/sidebar-dm/import.css#L22

[frozen epoch]

**import.css: **Line 22

[class*="sidebar_"]:has([aria-label*="Private"]):not(focus-within)>*>*>* {

[young knoll]

@tranquil vector done,. thanks for informing me :)
reload the css imports..

[young knoll]

new update: new variables

Variables

Default state

• --sidebar-channel-type : specifies the type of the channel list, either hover or focus.
• --sidebar-channel-width: sets the default width of the channel list.
• --sidebar-channel-transition: defines the default transition duration for the channel list.
• --sidebar-channel-icon-size: sets the default size of the channel icon.

Active state

• --sidebar-channel-active-width: sets the width of the channel list when it is active.
• --sidebar-channel-active-transition: defines the transition duration for the channel list when it is active.

@import url("https://lazuee.github.io/css-snippets/discord/channel-list/import.css");
:root {
    --sidebar-channel-type: "focus"; /* --sidebar-channel-type: "hover"; */
    --sidebar-channel-width: 68px;
    --sidebar-channel-transition: 200ms;
    --sidebar-channel-icon-size: 22px;
    --sidebar-channel-active-width: 245px;
    --sidebar-channel-active-transition: 800ms;
}

[nimble abyss]

YEAH!1!!!!!

[tranquil vector]

This updated version doesn't seem to work for me. I can drop back to the previous version before the update with the --sidebar-channel-type variable and it works fine, but this version doesn't do anything on my end. I've tried with both focus and hover, and with not setting a variable at all and just going with what's in the script, but none of it helps.

Hard to debug because I can't open the element inspector without crashing.

I do use OpenAsar in addition to Vencord, so I wonder if something in that interferes?

[nimble abyss]

maybe... ive had some bugginess with the member sidebar, with the member sidebar opening out further and further per (im assuming) member in the member list

[young knoll]

I have used @container. The issue you're facing could be due to browser compatibility, as the @container style may not be supported in your browser's version.

[young knoll]

@container style supported browser version

Mozilla Firefox: Firefox version 68 and later.
Google Chrome: Chrome version 69 and later.
Safari: Safari version 14 and later.
Microsoft Edge: Edge version 79 and later.

[young knoll]

check the css theme you're using, that may override the --sidebar-channel-active-transition

https://github.com/lazuee/css-snippets/blob/4c6086d15f0eeef0a2dfee1f8b4a548cfabda7cc/discord/channel-list/import.css#L32-L36

[frozen epoch]

**import.css: **Lines 32-36

/* active sidebar width */
[class*="sidebar_"]:has([aria-label*="(server)"]) {
    width: var(--sidebar-channel-active-width);
    transition: ease-in var(--sidebar-channel-active-transition);
}

[young knoll]

--sidebar-channel-active-width is the normal width of the channel list, and I didn't use !important because it's bad.

ohh,. you're talking about member list, my bad.. well, it's the same problem.
https://github.com/lazuee/css-snippets/blob/4c6086d15f0eeef0a2dfee1f8b4a548cfabda7cc/discord/member-list/import.css#L9-L13

[frozen epoch]

**import.css: **Lines 9-13

/* active membersWrap width */
[class*="membersWrap_"] [class*="members_"] {
    width: var(--member-list-active-width);
    transition: var(--member-list-active-transition);
}

[young knoll]

new update on channel list snippet.

Hold ctrl then press R, to re-cache the css..

[tranquil vector]

This must be it, I'm just on desktop Discord, not Vesktop.

[young knoll]

i'm using discord web,. because Discord desktop/Vesktop is laggy and sometimes get stuck on gray screen..

[lost elbow]

is this only for discord web?

[young knoll]

discord app used chrome version 108,. which is why style container is not working..

[young knoll]

@lost elbow instead of discord app (with vencord patch).
Use Vesktop because it uses chrome 118..