Sidebar Bug

[HartiganHM]

Hey, all! Pretty sure this is a bug, but wanted to get some eyes on it here fist. Basically what I'm seeing is:

• Sidebar starts as collapsed: false and variant: default
• When clicking on the SidebarCollapseButton (hooked up to a parent component that controls the state) collapsed is toggled to true, which also changes the variant to compact
• When clicking on the SidebarCollapseButton again, values are reset, but the text of the SidebarNavigationItem isn't visible
• When inspecting the element, it looks like opacity is set to 0 (toggled on/off manually in the screen recording)

Happy to open a bug if needed. More specifics about what I'm doing can be found in this Console PR under the CompositeSidebar component if it's helpful!

[SiTaggart]

Hi @HartiganHM

I'm not seeing it in any of our full compositions in Storybook, but we don't have the exact configuration you have https://paste-storybook.twilio.design/?path=/story/components-sidebar-fullcompositions--console

Would it be possible to create a reproduction in CodeSandbox for us?

[HartiganHM]

For sure. I'll check for disparities between our app and the configuration you shared. If I can't get it working, I'll try to setup an reproduction.

[HartiganHM]

@SiTaggart Here you go! This Sandbox recreates the issue we're seeing. Thanks for the help!

[SiTaggart]

OK, so I don't know why you're switching the sidebar variant when you open and close it, but thats what's causing this bug.

You can just set it to compact always.

remove this logic:
const sidebarVariant = isCollapsed ? "compact" : "default";

[nkrantz]

@HartiganHM I think I see the confusion, the naming is potentially a little misleading. The compact variant of Sidebar refers to its behavior when it's in a collapsed state. Both default and compact Sidebars can collapse and expand, but the default variant is completely hidden when collapsed, and the compact variant shows a compact view of the Sidebar when collapsed.

We recommend pretty much always using default="compact" Sidebars for Twilio products, meaning the collapsed view of the Sidebar should always show the smaller-width version.

[HartiganHM]

Thanks all, that makes sense! Everything is working as expected. I think I got tripped up on the docs somewhere. Thanks for the help!

[SiTaggart]

Cool cool cool, can't wait to see it live @HartiganHM

[HartiganHM]

Launch is set for 9/19 so we'll be sure to let you know 🎉