use navigationMenuOpen instead of sidebarCollapsed

Author: vikasgurjar

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

@@ -70,7 +70,7 @@ function DashboardLayoutSidebarCollapsedProp(props) {
   const { window } = props;
 
   const [pathname, setPathname] = React.useState('/dashboard');
-  const [sidebarCollapsed, toggleSidebar] = React.useState(true);
+  const [navigationMenuOpen, toggleSidebar] = React.useState(true);
   const router = React.useMemo(() => {
     return {
       pathname,
@@ -89,10 +89,10 @@ function DashboardLayoutSidebarCollapsedProp(props) {
       theme={demoTheme}
       window={demoWindow}
     >
-      <DashboardLayout sidebarCollapsed={sidebarCollapsed}>
+      <DashboardLayout navigationMenuOpen={navigationMenuOpen}>
         <DemoPageContent
           pathname={pathname}
-          toggleSidebar={() => toggleSidebar(!sidebarCollapsed)}
+          toggleSidebar={() => toggleSidebar(!navigationMenuOpen)}
         />
       </DashboardLayout>
     </AppProvider>

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

@@ -82,7 +82,7 @@ export default function DashboardLayoutSidebarCollapsedProp(props: DemoProps) {
   const { window } = props;
 
   const [pathname, setPathname] = React.useState('/dashboard');
-  const [sidebarCollapsed, toggleSidebar] = React.useState<boolean>(true);
+  const [navigationMenuOpen, toggleSidebar] = React.useState<boolean>(true);
   const router = React.useMemo<Router>(() => {
     return {
       pathname,
@@ -101,10 +101,10 @@ export default function DashboardLayoutSidebarCollapsedProp(props: DemoProps) {
       theme={demoTheme}
       window={demoWindow}
     >
-      <DashboardLayout sidebarCollapsed={sidebarCollapsed}>
+      <DashboardLayout navigationMenuOpen={navigationMenuOpen}>
         <DemoPageContent
           pathname={pathname}
-          toggleSidebar={() => toggleSidebar(!sidebarCollapsed)}
+          toggleSidebar={() => toggleSidebar(!navigationMenuOpen)}
         />
       </DashboardLayout>
     </AppProvider>

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

@@ -1,6 +1,6 @@
-<DashboardLayout sidebarCollapsed={sidebarCollapsed}>
+<DashboardLayout navigationMenuOpen={navigationMenuOpen}>
   <DemoPageContent
     pathname={pathname}
-    toggleSidebar={() => toggleSidebar(!sidebarCollapsed)}
+    toggleSidebar={() => toggleSidebar(!navigationMenuOpen)}
   />
 </DashboardLayout>

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

@@ -128,7 +128,7 @@ The layout sidebar can be hidden if needed with the `hideNavigation` prop.
 
 ### Toggle sidebar
 
-The sidebar can be toggled if needed with the `sidebarCollapsed` prop.
+The sidebar can be toggled if needed with the `navigationMenuOpen` prop.
 
 {{"demo": "DashboardLayoutSidebarCollapsedProp.js", "height": 400, "iframe": true}}
 

docs/pages/toolpad/core/api/dashboard-layout.json

@@ -11,8 +11,9 @@
     "defaultSidebarCollapsed": { "type": { "name": "bool" }, "default": "false" },
     "disableCollapsibleSidebar": { "type": { "name": "bool" }, "default": "false" },
     "hideNavigation": { "type": { "name": "bool" }, "default": "false" },
-    "onToggleSidebar": { "type": { "name": "func" } },
-    "sidebarCollapsed": { "type": { "name": "bool" }, "default": "false" },
+    "navigationMenuOpen": { "type": { "name": "bool" }, "default": "false" },
+    "onNavigationMenuClose": { "type": { "name": "func" } },
+    "onNavigationMenuOpen": { "type": { "name": "func" } },
     "sidebarExpandedWidth": {
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
       "default": "320"

docs/translations/api-docs/dashboard-layout/dashboard-layout.json

@@ -12,12 +12,15 @@
     "hideNavigation": {
       "description": "Whether the navigation bar and menu icon should be hidden"
     },
-    "onToggleSidebar": {
-      "description": "Callback function to be executed on sidebarCollased state change"
-    },
-    "sidebarCollapsed": {
+    "navigationMenuOpen": {
       "description": "A prop that controls the collapsed state of the sidebar."
     },
+    "onNavigationMenuClose": {
+      "description": "Callback function to be executed on navigation menu state changes to closed"
+    },
+    "onNavigationMenuOpen": {
+      "description": "Callback function to be executed on navigation menu state changes to open"
+    },
     "sidebarExpandedWidth": { "description": "Width of the sidebar when expanded." },
     "slotProps": { "description": "The props used for each slot inside." },
     "slots": { "description": "The components used for each slot inside." },

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

@@ -411,9 +411,9 @@ describe('DashboardLayout', () => {
     expect(screen.getByText('Hello world')).toBeTruthy();
   });
 
-  test('renders the sidebar in collapsed state when sidebarCollapsed is true', () => {
+  test('renders the sidebar in collapsed state when navigationMenuOpen is false', () => {
     render(
-      <DashboardLayout sidebarCollapsed>
+      <DashboardLayout navigationMenuOpen={false}>
         <div>Test Content</div>
       </DashboardLayout>,
     );
@@ -423,42 +423,49 @@ describe('DashboardLayout', () => {
     expect(screen.queryByLabelText('Collapse menu')).toBeNull();
   });
 
-  test('renders the sidebar in expanded state when sidebarCollapsed is false', () => {
+  test('renders the sidebar in expanded state when navigationMenuOpen is true', () => {
     render(
-      <DashboardLayout sidebarCollapsed={false}>
+      <DashboardLayout navigationMenuOpen>
         <div>Test Content</div>
       </DashboardLayout>,
     );
 
     expect(screen.getAllByLabelText('Collapse menu')).toBeTruthy();
   });
 
-  test('calls onToggleSidebar callback when sidebarCollapsed state changes', () => {
+  test('calls onNavigationMenuOpen callback when navigationMenuOpen state changes to open', () => {
     const mockToggleSidebar = vi.fn();
     const { rerender } = render(
-      <DashboardLayout sidebarCollapsed={false} onToggleSidebar={mockToggleSidebar}>
+      <DashboardLayout navigationMenuOpen={false} onNavigationMenuClose={mockToggleSidebar}>
         <div>Test Content</div>
       </DashboardLayout>,
     );
 
-    // Trigger sidebar toggle (simulate a collapse action)
+    // Trigger sidebar open action
     rerender(
-      <DashboardLayout sidebarCollapsed onToggleSidebar={mockToggleSidebar}>
+      <DashboardLayout navigationMenuOpen onNavigationMenuClose={mockToggleSidebar}>
         <div>Test Content</div>
       </DashboardLayout>,
     );
 
-    // Assert the callback was called with the new state
-    expect(mockToggleSidebar).toHaveBeenCalledWith(true);
+    expect(mockToggleSidebar).toHaveBeenCalledOnce();
+  });
+
+  test('calls onNavigationMenuClose callback when navigationMenuOpen state changes to close', () => {
+    const mockToggleSidebar = vi.fn();
+    const { rerender } = render(
+      <DashboardLayout navigationMenuOpen onNavigationMenuClose={mockToggleSidebar}>
+        <div>Test Content</div>
+      </DashboardLayout>,
+    );
 
-    // Trigger expand action
+    // Trigger sidebar close action
     rerender(
-      <DashboardLayout sidebarCollapsed={false} onToggleSidebar={mockToggleSidebar}>
+      <DashboardLayout navigationMenuOpen={false} onNavigationMenuClose={mockToggleSidebar}>
         <div>Test Content</div>
       </DashboardLayout>,
     );
 
-    // Assert the callback was called again with the updated state
-    expect(mockToggleSidebar).toHaveBeenCalledWith(false);
+    expect(mockToggleSidebar).toHaveBeenCalledOnce();
   });
 });

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

@@ -92,11 +92,15 @@ export interface DashboardLayoutProps {
   /** A prop that controls the collapsed state of the sidebar.
    * @default false
    */
-  sidebarCollapsed?: boolean;
+  navigationMenuOpen?: boolean;
   /**
-   * Callback function to be executed on sidebarCollased state change
+   * Callback function to be executed on navigation menu state changes to open
    */
-  onToggleSidebar?: (sidebarCollapsed: boolean) => void;
+  onNavigationMenuOpen?: () => void;
+  /**
+   * Callback function to be executed on navigation menu state changes to closed
+   */
+  onNavigationMenuClose?: () => void;
   /**
    * Width of the sidebar when expanded.
    * @default 320
@@ -139,8 +143,9 @@ function DashboardLayout(props: DashboardLayoutProps) {
     slots,
     slotProps,
     sx,
-    sidebarCollapsed,
-    onToggleSidebar,
+    navigationMenuOpen,
+    onNavigationMenuOpen,
+    onNavigationMenuClose,
   } = props;
 
   const theme = useTheme();
@@ -185,13 +190,15 @@ function DashboardLayout(props: DashboardLayoutProps) {
     React.useState(isNavigationExpanded);
 
   React.useEffect(() => {
-    if (typeof sidebarCollapsed === 'boolean') {
-      setIsNavigationExpanded(!sidebarCollapsed);
-      if (onToggleSidebar) {
-        onToggleSidebar(sidebarCollapsed);
+    if (typeof navigationMenuOpen === 'boolean') {
+      setIsNavigationExpanded(navigationMenuOpen);
+      if (navigationMenuOpen) {
+        onNavigationMenuOpen?.();
+      } else {
+        onNavigationMenuClose?.();
       }
     }
-  }, [sidebarCollapsed, setIsNavigationExpanded, onToggleSidebar]);
+  }, [navigationMenuOpen, setIsNavigationExpanded, onNavigationMenuOpen, onNavigationMenuClose]);
 
   React.useEffect(() => {
     if (isNavigationExpanded) {
@@ -502,15 +509,19 @@ DashboardLayout.propTypes /* remove-proptypes */ = {
    * @default false
    */
   hideNavigation: PropTypes.bool,
-  /**
-   * Callback function to be executed on sidebarCollased state change
-   */
-  onToggleSidebar: PropTypes.func,
   /**
    * A prop that controls the collapsed state of the sidebar.
    * @default false
    */
-  sidebarCollapsed: PropTypes.bool,
+  navigationMenuOpen: PropTypes.bool,
+  /**
+   * Callback function to be executed on navigation menu state changes to closed
+   */
+  onNavigationMenuClose: PropTypes.func,
+  /**
+   * Callback function to be executed on navigation menu state changes to open
+   */
+  onNavigationMenuOpen: PropTypes.func,
   /**
    * Width of the sidebar when expanded.
    * @default 320