#Hidden channel sidebar

1 messages · Page 1 of 1 (latest)

sharp flicker
#

Edited version with anim and slightly better selector i think

[class^=sidebar_]:has([class*=avatarWrapper_]) {
  transition: width 0.2s ease;
  &:not(:hover) {
    width: 5px;
  }
}```
#

and smaller

dreamy herald
sharp flicker
#

original was this btw

[class^=sidebar_]:not(:has(.header_a0)) {
    max-width: 5px;
}

[class^=sidebar_]:hover {
    max-width: none;
}```
vague wing
dull pivot
#

is there one for the channel list?

vague wing
brave cape
# dreamy herald im so good at css trust

This one much better with the transition to make it much smoother ..

[class^=sidebar_]:has([class*=avatarWrapper_]) {
    transition: width 0.8s ease; /* Smooth transition for width changes */
    &:not(:hover) {
        width: 5px; /* Width when not hovered */
    }
}
dreamy herald
dreamy herald
brave cape
fresh ocean
#

Finally, a useful low resolution second monitor solution for channel list being too fucking big

(why did i write server list)

dull pivot
strange zodiac
dreamy herald
dreamy herald
fresh ocean
fresh ocean
#

I personalized this to also include server list. I had to disable BetterFolders' sidebar tho, but

[class^=sidebar_]:has([class*=avatarWrapper_]) {
  transition: width 0.5s ease, padding 0.5s ease;
  &:not(:hover) {
    padding-left: 30px;
    width: 0px;
  }

}

[class*=guilds_] {
    transition: width 0.5s ease, padding 0.5s ease;
  &:not(:hover) {
    padding-left: 30px;
    width: 0px;
  }
}
#

Little smoother than Koda's snippet

#

But not 0.8s

fresh ocean
#

Also yes, server sidebar is wider than channel bar

Updated the code so it's the same width

sharp flicker
#

oh using padding is smart

dreamy herald
#

The desktop design refresh makes this look ugly. Will find a fix soon

gentle birch
#

Laggy animation

little maple
velvet star
#

possible for server list?

fresh ocean
#

You can adjust the time if you want

velvet star
fresh ocean
sharp flicker
#

and here's a slightly modified version of the part of that minimizes members list

[class^=membersWrap] {
  min-width: 0;
  >[class^=members_] {
    transition: width 0.25s ease;
    &:not(:hover) {
      width: 7px;
    }
  }
}```
ember verge
# 
: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 removes that tiny sliver that remains of the channel list

dreamy herald
fresh ocean
sharp flicker
#

wtf just definie the variable in normal :root{} or don't even use a variable

ember verge
sharp flicker
sharp flicker
sharp flicker
#

still is kinda scuffed, especially the duplicate :not(:hover, :focus-within), but idrk how I could fix that part

#

also i don't even really like the focus-within very much

sharp flicker
ember verge
#

this is nicee

sharp flicker
ember verge
#

I believe I got this snippet from this thread

#

From what I understand, these two selectors are likely for disabling it when the user drags channels in a server

#

And for when the mouse hovers over right click menus that aren’t contained within the channel list

sharp flicker
#

oh

elfin wave
#

Any way to have this as a button beside the # of the channel name on the top of the screen similar to how the BD plugin goes?

fresh ocean
#

It shouldn't be that hard

#

But anyway I don't think it'll be made

elfin wave
#

ah sad
thank you

acoustic saddle
#

can someone plz tell me what should I add after [class^=sidebar_]:has([class*=avatarWrapper_]) to make the sidebar hide only DM chats but not server's channels?
tried to figure it out myself but all my attempts failed

sterile seal
# fresh ocean I personalized this to also include server list. I had to disable BetterFolders'... 
/* Define custom CSS variables */
:root {
    --collapsed-channeList-width: 0px;
/*     --channelList-width: 240px; */
    --channelList-padding: 35px;

/*     --collapsed-memberList-width: 0px; */
    --serverList-padding: 15px;
}
/* Channel list */
[class^=base_] > [class^=content] > [class^=sidebar] > [class^=sidebarList]:not([class^=hidden]) {
    /* width: var(--channelList-width) !important; */
    transition: width 0.2s ease, padding 0.3s ease; /* how fast to open and close the channel list and the padding */
    transition-delay: 0.2s; /* how long to hover before opening*/
    &:not(:hover) {
        transition-delay: 1.5s; /* how long to keep open after hover is removed */
        padding-left: var(--channelList-padding);
        width: 0px !important;
    }
}

/* Server list */
[class*=guilds_]{
    transition: width 0.2s ease, padding 0.3s ease; /* how fast to open and close the server list and the padding */
    transition-delay: 0.5s; /* how long to hover before opening*/
    &:not(:hover) {
        transition-delay: 1.5s;  /* how long to keep open after hover is removed */
        padding-left: var(--serverList-padding);
        width: 0px;
    }
}

/* Member list */
/* [class^=base_] > [class^=content] > [class^=membersWrap] {
    min-width: 0;
    > [class^=members_] {
        transition: width 0.2s ease; 
        transition-delay: 0.5s;
        &:not(:hover) {
            width: 8px;
        }
    }
} */

added some transition-delays so it doesn't open and close immediately, (also changed a few values)

EDIT(21-dec-24): fixed from the new update
EDIT: (28-march-25): eeeh

sterile seal
obsidian oasis
obsidian oasis
sterile seal
#

probably your theme interferring

obsidian oasis
sterile seal
#

is that visual refresh?

#

cuz i don't use visual refresh

obsidian oasis
sterile seal
#

oh might be that

#

:3

obsidian oasis
#

it can be included in experiments

sterile seal
#

nah i'm fine

obsidian oasis
sterile seal
#

well its experimental

obsidian oasis
#

ok, now I'll try the old design

obsidian oasis
#

but I still don't really like this hiding

#

:)

rigid wedge
austere vigil
sterile seal
#

so ye

#

i actually stole someone else's css here to fix mine

#

but it ain't stealing if you share with others and don't sell

austere vigil
#

Only real issue is that the window doesn't retain it's size if I watch some media in fullscreen

fresh ocean
#

Classical Discord behaviour

sharp minnow
sterile seal
#

it might be broken by visual refresh

#

but i don't use visual refresh so idk

sharp flicker
#

visual refresh is on for everyone now

#

unless you disable the experiment

sterile seal
#

i shall look into it, at some point

sharp minnow
#

yeah this is ugly asf

#

ty tho, ping me if you ever come up w something

sterile seal
#

ok so first of all

#

you can resize the sidebar now

#

second i'm a genius(idk css)

#

just append this to the class specifying thingy to fix the sidebar

image.png
#

the sidebar retains the set width if you don't specify it in the snippet so that's good but you can't change width as the sidebar closes before you do that, so set your width before enabling the snippet

sterile seal
#

idk what to do with members list so i'm just commenting it for now

sterile seal
#

append

[class^=panels] {
    overflow: hidden;
    max-height: 0; 
    transition: max-height 0.2s ease-out;
}

[class^=sidebarList]:hover ~ [class^=panels] {
    max-height: 60px;
    transition: max-height 0.2s ease-in;
}

[class^=panels]:hover {
    max-height: 60px;
}

to make the userpanel only show on hover

#

aaaaah adjust the delays...

sharp flicker