[Feature Request] "rail icon" variant for SideNav

[Tomahaawk]

Package

@carbon/react

Browser

Chrome, Firefox

Package version

1.40.0

React version

16.13

Description

When zooming over 175% on my browser or settign the view width to < 1056px the SideNav becomes unclickable when collapsed. I'm using the SideNav as a controlled component but if I use it with the isRail prop it works as expected.

Reproduction/example

https://stackblitz.com/edit/github-ked8wj?file=src%2FApp.jsx

Steps to reproduce

1 - Set the browser width to < 1056px or zoom in the page.
2 - Close the SideNav with the toggle button.

Expected result: User should be able to open the SideNav again.
Actual result: User cannot click on the SideNav.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

IBM RPA

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[alisonjoseph]

Hi @Tomahaawk this appears to be working as intended as the inert property is being added here

I would recommend placing the toggle button outside of the SideNav component, if this doesn't work could you provide more details around your use-case? Thanks!

[Tomahaawk]

@alisonjoseph the issue is not related to the toggle button. I updated the demo.

https://stackblitz.com/edit/github-ked8wj

If you open the sandbox and make the screen smaller, you will notice that you cannot interact with the side nav after the size I mentioned on the description.

I recorded a video of the issue happening.
https://github.com/carbon-design-system/carbon/assets/12561157/845a690f-1aa4-4556-94e6-edf597ab52f0

[alisonjoseph]

Thanks for the additional context, I see what you're saying now.

@riddhybansal lets pair up next week on this, we may be able to just remove the isLg check on the inert prop, but will need to test the ramifications.

[alisonjoseph]

@Tomahaawk I was looking closer at this issue with @riddhybansal this morning and we think this is working as intended.

Just to clarify, you want to be able to click on an item in the side nav when it is in the collapsed state? This isn't currently supported within the component. Can you provide more details around your use-case here so we can discuss with design on whether this is an enhancement we would want to add?

[Tomahaawk]

@alisonjoseph Our implementation is based on IDENavigation from Cloud PAL (which seems to be broken right now). We used their component at the begining and later on we replaced it with the Carbon implementation.

This is how our menu looks like:

We have a button at the bottom that collapses and expand the menu. Pretty much like the sandbox.
We would like to keep the menu on the side when on smaller screens, so the user can at least click on the icons to navigate around.

[alisonjoseph]

Thanks @Tomahaawk, it looks like you're asking for an isRail option for sidenav that does NOT open/close on hover by default, and instead allows the user to interact with the sidenav rail while it is collapsed.

@carbon-design-system/design fyi

[Tomahaawk]

Yes @alisonjoseph, that sums it up

[CalvinThai]

any update on this?

same issue here, when the width of the window is small the isRail attribute gets added and the buttons aren't able to be clicked

[alisonjoseph]

Hi, the Carbon team discussed this today, and while we may consider this enhancement in the future, it will require additional design and accessibility research. Unfortunately, it’s not something that we are able to prioritize in our immediate backlog.

For now, we recommend building a custom SideNav component to achieve this functionality.