SideNavigation collapse again after Router action clicked

[tonyschwartz]

Viewport is narrow, user opens the side nav via the hamburger menu. User clicks on a "Route" link which takes the user to the proper page. The problem is, the side nav remains open. I'm new to Cloudscape and can't figure this out. Is there a solution to this? How can I programmatically or otherwise get the side-nav to return to it's default "collapsed" state after the user takes action?

[rubencarvalho]

Hello Tony,

If you want to control the state of the navigation, tools, or split panels, you need to explicitly set the properties and the corresponding event listeners.

For the navigation panel, set the navigationOpen property and onNavigationChange event listener.

For your case, you could try the example below:

const [navigationOpen, setNavigationOpen] = useState(true);

<AppLayout
  ...
  navigationOpen={navigationOpen}
  onNavigationChange={() => setNavigationOpen(false)}
  ...
/>

Let me know if that helped.

Thank you!

[rubencarvalho]

Alternatively, you also have the option of using an AppLayout component per route, which will have the side effect of resetting the state of the panels.

This can be useful if you're relying on the contentType property that determines the default behavior of the component (including the state of the panels) based on some predefined page layouts.

[tonyschwartz]

Thank you, sir. You pointed me in the right direction. I'm brand new to Reactjs and brand new to Cloudscape. But, I like it so far. The way I solved it is with:

	const [navigationOpen, setNavigationOpen] = useState(true);
	<AppLayout
		navigationOpen={navigationOpen}
		navigation={<Navigation navCallback={() => setNavigationOpen(false)} />}

and in the Navigation component, I have:

const Navigation = ({ navCallback }) => {
	const [activeHref, setActiveHref] = useState("/");
	const navigate = useNavigate();
	const handleSideNavigationItemClick = (e) => {
		if (!e.detail.external) {
			e.preventDefault();
			navigate(e.detail.href);
			setActiveHref(e.detail.href);
		}
		if (navCallback) {
			navCallback();
		}
	};
	return (
		<SideNavigation
			activeHref={activeHref}
			header={{ text: "Nav Header" }}
			onFollow={handleSideNavigationItemClick}
			items={[
...