Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Question]: SideNav not closing when clicking links #13911

Closed
1 task done
jeanbu opened this issue Jun 2, 2023 · 3 comments
Closed
1 task done

[Question]: SideNav not closing when clicking links #13911

jeanbu opened this issue Jun 2, 2023 · 3 comments

Comments

@jeanbu
Copy link

jeanbu commented Jun 2, 2023

Question for Carbon

Package
@carbon/react

Browser
Chrome

Package version
@carbon/react: 1.19.0

React version
18.2.0

Description
As pointed out in #3666 the sideNav menu is not collapsing when clicking a link element. The issue to close the menu by clicking anywhere on the overlay was solved in #8296 but can't find any way to achieve the same behaviour as in the https://carbondesignsystem.com/ and automatically close the side menu. Has this issue been solved?

const MainHeader = () => { return ( <HeaderContainer render={({ isSideNavExpanded, onClickSideNavExpand }) => ( <Header aria-label="Header navigation"> <SkipToContent /> <HeaderMenuButton aria-label={isSideNavExpanded ? "Close menu" : "Open menu"} onClick={onClickSideNavExpand} isActive={isSideNavExpanded} /> ... <SideNav aria-label="Side navigation" expanded={isSideNavExpanded} isPersistent={false} onOverlayClick={onClickSideNavExpand} > <SideNavItems> <HeaderSideNavItems> <HeaderMenuItem element={NavLink} to={/link1}>
Link1
...`

Code of Conduct

@alisonjoseph
Copy link
Member

Hi, can you clarify what you are asking for? Can you post a reproduction in stackblitz and/or with video screenshot?

@jeanbu
Copy link
Author

jeanbu commented Jun 13, 2023

Sure! I refer to the same issue as this question.

Screencast.from.13-06-23.10.17.08.webm

As in the video, on the Carbon Design System website, the sidenav menu is automatically closed when clicking one of the links, but I can't see how to replicate that with any of the available props in the SideNav, so we need to click the "X" to close it.

@tay1orjones
Copy link
Member

Hey there! We've shipped a series of enhancements to the focus behavior of sidenav and UIShell starting in v1.31.x, v1.32.x, and will be shortly releasing v1.33.0 with additional improvements. Please update and let us know if you're still running into this issue and we'll reopen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

3 participants