wrong spacing in the Sidebar component collapsed state when hierarchical property + mixed navigation structure is used

[caickPassarella]

Description

When using a mixed navigation structure in the Sidebar component (hierarchical + flat), when you collapse the sidebar the icons are cut off due to, I believe, the extra padding that the hierarchical property ofSidebarNavigation adds.

If you remove the hierarchical property, the icons correctly aligns with the sidebar.

Looking at the CSS, with the hierarchical property, the padding of SidebarNavigationItem looks like this:
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
It changes the left padding to be 1.5rem instead of 0.5 (paddingLeft: "space70")

But removing it would break the UI alignment of the mixed structure of the sidebar.

Link to Reproduction

https://codesandbox.io/p/sandbox/distracted-framework-wqtzl7?file=%2Fsrc%2Findex.tsx%3A1%2C1-115%2C1

Steps to reproduce

1. In the Sidebar component, use both the SidebarNavigationItem and SidebarNavigationDisclosure elements (mixed)
2. Add the hierarchical property to the SidebarNavigation element like it says in the docs
3. Collapse the sidebar
4. The icons should be off center and partially hidden

Paste Core Version

20.14.0

Browser

Arc browser 1.47.1 (Chromium)

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[nkrantz]

Hey @caickPassarella -

This actually isn't a bug, we have some relevant guidance in the Handling a collapsing Sidebar section of the Sidebar Navigation docs. Hierarchical navigations should use the hideItemsOnCollapse prop because showing Disclosures in a collapsed compact Sidebar isn't supported. Navigating through multiple levels of disclosures within a collapsed Sidebar is a complex pattern for such a small area of the screen, which is why we don't currently support it.

Does using the hideItemsOnCollapse prop solve this for you? If your product's use case requires showing the navigation hierarchy even in collapsed compact Sidebars, can you provide some more context as to why it's a requirement?

Thanks!

[caickPassarella]

That makes sense! It did solve my issue, apologies for the confusion. I missed that prop since the hierarchy navigation icon was being hidden by default on collapse.