From 2d3857712dd4d1c22feef789551a1140ebc8e642 Mon Sep 17 00:00:00 2001
From: Vikas Gurjar <13435960+vikasgurjar@users.noreply.github.com>
Date: Sat, 7 Dec 2024 15:54:31 +0530
Subject: [PATCH] use navigationMenuOpen instead of sidebarCollapsed

---
 .../DashboardLayoutSidebarCollapsedProp.js    |  6 +--
 .../DashboardLayoutSidebarCollapsedProp.tsx   |  6 +--
 ...oardLayoutSidebarCollapsedProp.tsx.preview |  4 +-
 .../dashboard-layout/dashboard-layout.md      |  2 +-
 .../toolpad/core/api/dashboard-layout.json    |  5 ++-
 .../dashboard-layout/dashboard-layout.json    | 11 +++--
 .../DashboardLayout/DashboardLayout.test.tsx  | 35 +++++++++-------
 .../src/DashboardLayout/DashboardLayout.tsx   | 41 ++++++++++++-------
 8 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.js
index cbd2357620d..6ef9969bee5 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.js
+++ b/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>
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.tsx
index a693e39ecd1..f00eadeb905 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.tsx
+++ b/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>
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.tsx.preview
index 36d7e84465e..3e5869c9ede 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarCollapsedProp.tsx.preview
+++ b/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>
\ No newline at end of file
diff --git a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
index 52a98600340..f786c1f46c7 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
+++ b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
@@ -124,7 +124,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}}
 
diff --git a/docs/pages/toolpad/core/api/dashboard-layout.json b/docs/pages/toolpad/core/api/dashboard-layout.json
index 866595b8116..59fa368c747 100644
--- a/docs/pages/toolpad/core/api/dashboard-layout.json
+++ b/docs/pages/toolpad/core/api/dashboard-layout.json
@@ -8,8 +8,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"
diff --git a/docs/translations/api-docs/dashboard-layout/dashboard-layout.json b/docs/translations/api-docs/dashboard-layout/dashboard-layout.json
index 5abc702cad4..2a03957d165 100644
--- a/docs/translations/api-docs/dashboard-layout/dashboard-layout.json
+++ b/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." },
diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx
index c6af2d57ffa..2d7b6f4f411 100644
--- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx
+++ b/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,9 +423,9 @@ 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>,
     );
@@ -433,32 +433,39 @@ describe('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();
   });
 });
diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
index 10a6c6b500a..e77954a69d8 100644
--- a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
+++ b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -97,11 +97,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
@@ -144,8 +148,9 @@ function DashboardLayout(props: DashboardLayoutProps) {
     slots,
     slotProps,
     sx,
-    sidebarCollapsed,
-    onToggleSidebar,
+    navigationMenuOpen,
+    onNavigationMenuOpen,
+    onNavigationMenuClose,
   } = props;
 
   const theme = useTheme();
@@ -193,13 +198,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) {
@@ -513,15 +520,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