responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

noticed a fair few "details" missing in the original – made sure to put them in my version, will follow up with some posts for them 🤙 here's the @CodePen 🚀

Wen jh3yycn-ui component library?

working on it 😅

🔥🔥🔥

I’ve seen this layout/pattern quite a times here this past week. How can anyone be okay with the fact that this will squeeze the main content view? If there are cards like flex content in the main container, it’ll get wrapped downwards and text width will get reduced so the letters jump to new lines.. The user will get cognitive overload for content moving around unnecessarily? What am I not getting here? Besides that - cool demo!

Not at all, I completely agree 💯 I was jus tagged a bunch to make it 😅 It’s for more of a canvas type UI in my opinion or one where the content is constrained to a certain width but would still have that shift at certain sizes 😫

THIS IS SO GOATED!!

The master himself has done it. Can you share the source please?

You win 🏆

🙌🙌🙌

Where's the code? Asking for a friend

This is insane

🫶

Very impressive !

🙏🙏

You’re a CSS god

strive to break down these things for people best I can 🙏

Cool.

🙏

it’s crazy how you come through everytime with something better than the original

🙏🧑‍🍳 that’s what I’m here for

add visibility:hidden (possibly with a one-way discrete transition) for accessibility

torn on this one - or if it’s even a pattern that could be done well accessibly jus’ had a bunch of tags requesting to make it borders between a couple of WAI-ARIA patterns but design feels like it should always be available. the control does nothing but pin visually

that's fair if you think it should be tab-accessible even when collapsed (in that case i'd also make it visible for :focus-within)

yep - that’s how it works. hard to show all the details in the one clip. but the / key shows it by focussing the filter input and sliding open at the same time 🤔 still not 100% about it but there are some absolutely horrendous sidebar implementations out there 😅

It's nice 🫶🫶, but how does it look on mobile?

on mobile it turns into the typical sidebar drawer with a different button 🤙 means we don’t need to duplicate the markup or anything wild

In every version I’ve seen so far, the button shifts when clicked, which seems flawed to me - I feel like top level controls should not move.

How would you do the same but overlay the menu over the content? We want the sidebar to open on hover and keep open when we pin it (via an icon) And vice versa

Is that not what’s happening here? we slide it over on hover/focus then pin it on click

🔥

This is a brilliant use of :has() and popover! Love the creativity in achieving this with zero JS. The smooth transition is just chef's kiss🧑‍🍳. Thanks for sharing!

Is it pure CSS3? 🤔