[DashboardLayout] Add prop `sidebarCollapsed` and `onToggleSidebar` #4516

vikasgurjar · 2024-12-06T08:30:50Z

I've read and followed the contributing guide on how to create great pull requests.
I've updated the relevant documentation for any new or updated feature.
I've linked relevant GitHub issue with "Closes #".
I've added a visual demonstration in the form of a screenshot or video.

Screen.Recording.2024-12-06.at.3.00.24.PM.mov

vikasgurjar · 2024-12-06T08:34:20Z

@Janpot @bharatkashyap from previous convo here

edit: actually, it looks like the data grid has the convention of "xyzOpen", "onXyzOpen" and "onXyzClose". Perhaps that's the closest in spirit?

@Janpot Are you suggesting to have two different callbacks for open and close events? onSidebarOpen and onSidebarClosed?

When changing any of the demos and prop types, make sure to run pnpm docs:typescript:formatted to format TS demos and pnpm:proptypes to autogenerate prop type changes
I ran that command before raising the PR. What I have noticed is this lines props are wrongly generated. Correct proptype should be Proptype.func.required I think.

Janpot · 2024-12-06T10:13:52Z

Yes, I'm suggesting to make this similar to how we do this in other products of the MUI ecosystem. for example menuOpen and friends in the datagrid.

So something like navigationMenuOpen, onNavigationMenuOpen, onNavigationMenuClose. I have a slight preference of naming it semantically (navigation menu) over naming it according to where it's laid out (side bar). This leaves the option open to introduce other variants some day. Not sure how the team feels about this @bharatkashyap @apedroferreira did we already name it this way in other places? If so maybe it makes more sense to stay consistent?

please wait a moment with implementing this to allow us get to a consensus.

apedroferreira · 2024-12-06T18:49:39Z

Yes, I'm suggesting to make this similar to how we do this in other products of the MUI ecosystem. for example menuOpen and friends in the datagrid.

So something like navigationMenuOpen, onNavigationMenuOpen, onNavigationMenuClose. I have a slight preference of naming it semantically (navigation menu) over naming it according to where it's laid out (side bar). This leaves the option open to introduce other variants some day. Not sure how the team feels about this @bharatkashyap @apedroferreira did we already name it this way in other places? If so maybe it makes more sense to stay consistent?

please wait a moment with implementing this to allow us get to a consensus.

I've been calling it sidebar when it's purely referred to inside the DashboardLayout component (some props already follow this logic), but "navigationMenu" would also be fine and is more semantic in terms of the global app - we could make an effort to gradually rename things in this direction.

About referring to the property as "open", it does make more sense than referring to it as "collapsed" now that we're making it a controlled prop... So I agree with your suggestions.

vikasgurjar · 2024-12-09T05:38:11Z

@Janpot @apedroferreira I have made changes as per the above suggestions, please review them when possible

apedroferreira

Thanks for the effort so far, it's looking good but I have many important suggestions!

apedroferreira · 2024-12-11T14:50:09Z

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

   * @default false
   */
  hideNavigation?: boolean;
+  /** A prop that controls the collapsed state of the sidebar.


Suggested change

/** A prop that controls the collapsed state of the sidebar.

/** If `true`, the navigation menu is expanded.

--

<br class="Apple-interchange-newline">

apedroferreira · 2024-12-11T14:51:35Z

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

+   */
+  navigationMenuOpen?: boolean;
+  /**
+   * Callback function to be executed on navigation menu state changes to open


Suggested change

* Callback function to be executed on navigation menu state changes to open

* Callback fired when navigation menu is expanded.

apedroferreira · 2024-12-11T14:51:57Z

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

+   */
+  onNavigationMenuOpen?: () => void;
+  /**
+   * Callback function to be executed on navigation menu state changes to closed


Suggested change

* Callback function to be executed on navigation menu state changes to closed

* Callback fired when navigation menu is collapsed.

apedroferreira · 2024-12-11T15:12:38Z

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

+  React.useEffect(() => {
+    if (typeof navigationMenuOpen === 'boolean') {
+      setIsNavigationExpanded(navigationMenuOpen);
+      if (navigationMenuOpen) {


When navigationMenuOpen is a boolean, we cannot use the current isDesktopNavigationExpanded or isMobileNavigationExpanded states the way they're currently being used in this component.

So besides this effect, we need to make it so that all checks that involve isDesktopNavigationExpanded or isMobileNavigationExpanded check navigationMenuOpen in those cases instead.

And every current call to setIsDesktopNavigationExpanded or setIsMobileNavigationExpanded can be ignored when navigationMenuOpen is a boolean, but the appropriate onNavigationMenuOpen or onNavigationMenuClose should be called instead.

onNavigationMenuOpen and onNavigationMenuClose should also still be called when navigationMenuOpen is undefined, however, so that they can be used for other cases.

Your current approach requires an extra render for the effect to run, which should not be necessary, and the navigationMenuOpen value can become out of sync with the UI when the internal state is changed.

Hopefully this makes sense and points you in the right direction!

apedroferreira · 2024-12-11T15:20:27Z

packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx

    expect(screen.getByText('Hello world')).toBeTruthy();
  });
+
+  test('renders the sidebar in collapsed state when navigationMenuOpen is false', () => {


Thanks a lot for adding tests, they look good!

apedroferreira · 2024-12-11T15:22:53Z

docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md


 {{"demo": "DashboardLayoutSidebarHidden.js", "height": 400, "iframe": true}}

+### Toggle sidebar


This section needs to be a bit more complete as in referring to the whole concept of using "controlled state" for the navigation menu, as well as what kind of use case that could serve.

We also need to document the new callbacks, and how they could be used together with navigationMenuOpen.

Anyway, I can take care of the documentation part when the functionality is done unless you really want to tackle it!

apedroferreira · 2024-12-11T15:27:15Z

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.tsx

+      <DashboardLayout navigationMenuOpen={navigationMenuOpen}>
+        <DemoPageContent
+          pathname={pathname}
+          toggleSidebar={() => toggleSidebar(!navigationMenuOpen)}


We should also show the typical usage for the new callbacks in this example, which would change the navigationMenuOpen state accordingly.

apedroferreira · 2024-12-11T15:27:46Z

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.tsx

+  const { window } = props;
+
+  const [pathname, setPathname] = React.useState('/dashboard');
+  const [navigationMenuOpen, toggleSidebar] = React.useState<boolean>(true);


Suggested change

const [navigationMenuOpen, toggleSidebar] = React.useState<boolean>(true);

const [navigationMenuOpen, setNavigationMenuOpen] = React.useState<boolean>(true);

amortoni · 2025-06-23T23:46:47Z

Hi team,

Just wondering if there's any update on this PR. It seems like a straightforward and useful addition, and I noticed it's been open since December 2024 with no major changes requested.

Is there anything blocking this from moving forward? We're interested in this feature and would love to see it merged soon.

Thanks for your work on the project!

apedroferreira · 2025-06-24T08:00:35Z

Hi team,

Just wondering if there's any update on this PR. It seems like a straightforward and useful addition, and I noticed it's been open since December 2024 with no major changes requested.

Is there anything blocking this from moving forward? We're interested in this feature and would love to see it merged soon.

Thanks for your work on the project!

Toolpad Core won't be actively maintained in the short term so we're not prioritizing this feature right now unfortunately...

We will however publish a template soon in the Material UI docs with more customizable equivalent versions of these components, including separate components for the sidebar and header with the navigation menu expanded state being controlled from the outside and passed to them as props.

pongells · 2025-07-21T10:17:21Z

Toolpad Core won't be actively maintained in the short term so we're not prioritizing this feature right now unfortunately...

this is sad news :(
toolpad core seemed really promising, just missing few things like this PR and a tiny bit more customisation.

We will however publish a template soon in the Material UI docs with more customizable equivalent versions of these components, including separate components for the sidebar and header with the navigation menu expanded state being controlled from the outside and passed to them as props.

what do you mean by template? an example using shared components replacing the toolpad core features?

prakhargupta1 · 2025-07-21T11:42:45Z

what do you mean by template? an example using shared components replacing the toolpad core features?

Yes, a dashboard example built using Material UI core components, so that there is no dependency on Toolpad. Here is a PR for this: mui/material-ui#46376

Janpot added type: new feature Expand the scope of the product to solve a new problem. scope: toolpad-core Abbreviated to "core" labels Dec 6, 2024

vikasgurjar force-pushed the master branch from 92eb1aa to 2d38577 Compare December 7, 2024 10:35

vikasgurjar added 4 commits December 9, 2024 10:49

add prop sidebarCollapsed and onToggleSidebar

83e9dd1

run pnpm docs:typescript:formatted

374dfbf

add demo for sidebarCollapsed

9aaee1f

use navigationMenuOpen instead of sidebarCollapsed

f7f3397

vikasgurjar force-pushed the master branch from 2d38577 to f7f3397 Compare December 9, 2024 05:19

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 11, 2024

apedroferreira requested changes Dec 11, 2024

View reviewed changes

This was referenced Apr 25, 2025

[DashboardLayout] Allow full customization for dashboard header #4820

Merged

Add props to control sidebar's collapsed state in DashboardLayout component #4406

Open

apedroferreira mentioned this pull request May 30, 2025

[DashboardLayout] Support customizing the Expand/Collpase button in the sidebar #4986

Open

apedroferreira added this to Toolpad public roadmap Jun 18, 2025

apedroferreira moved this to Backlog in Toolpad public roadmap Jun 18, 2025

bharatkashyap changed the title ~~add prop sidebarCollapsed and onToggleSidebar~~ [DashboardLayout] Add prop sidebarCollapsed and onToggleSidebar Jul 12, 2025

-  /** A prop that controls the collapsed state of the sidebar.
+  /** If `true`, the navigation menu is expanded.
+--
+<br class="Apple-interchange-newline">

	* Callback function to be executed on navigation menu state changes to open
	* Callback fired when navigation menu is expanded.


		{{"demo": "DashboardLayoutSidebarHidden.js", "height": 400, "iframe": true}}

		### Toggle sidebar

	const [navigationMenuOpen, toggleSidebar] = React.useState<boolean>(true);
	const [navigationMenuOpen, setNavigationMenuOpen] = React.useState<boolean>(true);

Uh oh!

[DashboardLayout] Add prop sidebarCollapsed and onToggleSidebar #4516

Are you sure you want to change the base?

[DashboardLayout] Add prop sidebarCollapsed and onToggleSidebar #4516

Uh oh!

Conversation

vikasgurjar commented Dec 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vikasgurjar commented Dec 6, 2024

Uh oh!

Janpot commented Dec 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

apedroferreira commented Dec 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vikasgurjar commented Dec 9, 2024

Uh oh!

apedroferreira left a comment

Choose a reason for hiding this comment

Uh oh!

apedroferreira Dec 11, 2024

Choose a reason for hiding this comment

Uh oh!

apedroferreira Dec 11, 2024

Choose a reason for hiding this comment

Uh oh!

apedroferreira Dec 11, 2024

Choose a reason for hiding this comment

Uh oh!

apedroferreira Dec 11, 2024

Choose a reason for hiding this comment

Uh oh!

apedroferreira Dec 11, 2024

Choose a reason for hiding this comment

Uh oh!

apedroferreira Dec 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

apedroferreira Dec 11, 2024

Choose a reason for hiding this comment

Uh oh!

apedroferreira Dec 11, 2024

Choose a reason for hiding this comment

Uh oh!

amortoni commented Jun 23, 2025

Uh oh!

apedroferreira commented Jun 24, 2025

Uh oh!

pongells commented Jul 21, 2025

Uh oh!

prakhargupta1 commented Jul 21, 2025

Uh oh!

Uh oh!

[DashboardLayout] Add prop `sidebarCollapsed` and `onToggleSidebar` #4516

[DashboardLayout] Add prop `sidebarCollapsed` and `onToggleSidebar` #4516

vikasgurjar commented Dec 6, 2024 •

edited

Loading

Janpot commented Dec 6, 2024 •

edited

Loading

apedroferreira commented Dec 6, 2024 •

edited

Loading

apedroferreira Dec 11, 2024 •

edited

Loading