add prop sidebarCollapsed and onToggleSidebar

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

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { createTheme } from '@mui/material/styles';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { Button } from '@mui/material';
+
+const NAVIGATION = [
+  {
+    segment: 'dashboard',
+    title: 'Dashboard',
+    icon: <DashboardIcon />,
+  },
+  {
+    segment: 'orders',
+    title: 'Orders',
+    icon: <ShoppingCartIcon />,
+  },
+  {
+    segment: 'reports',
+    title: 'Reports',
+    icon: <BarChartIcon />,
+  },
+];
+
+const demoTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data-toolpad-color-scheme',
+  },
+  colorSchemes: { light: true, dark: true },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
+function DemoPageContent({ pathname, toggleSidebar }) {
+  return (
+    <Box
+      sx={{
+        py: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        textAlign: 'center',
+      }}
+    >
+      <Typography>Dashboard content for {pathname}</Typography>
+      <Button onClick={() => toggleSidebar()}>Toggle Sidebar</Button>
+    </Box>
+  );
+}
+
+DemoPageContent.propTypes = {
+  pathname: PropTypes.string.isRequired,
+  toggleSidebar: PropTypes.func.isRequired,
+};
+
+function DashboardLayoutSidebarCollapsedProp(props) {
+  const { window } = props;
+
+  const [pathname, setPathname] = React.useState('/dashboard');
+  const [navigationMenuOpen, toggleSidebar] = React.useState(true);
+  const router = React.useMemo(() => {
+    return {
+      pathname,
+      searchParams: new URLSearchParams(),
+      navigate: (path) => setPathname(String(path)),
+    };
+  }, [pathname]);
+
+  // Remove this const when copying and pasting into your project.
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  return (
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
+      <DashboardLayout navigationMenuOpen={navigationMenuOpen}>
+        <DemoPageContent
+          pathname={pathname}
+          toggleSidebar={() => toggleSidebar(!navigationMenuOpen)}
+        />
+      </DashboardLayout>
+    </AppProvider>
+  );
+}
+
+DashboardLayoutSidebarCollapsedProp.propTypes = {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  window: PropTypes.func,
+};
+
+export default DashboardLayoutSidebarCollapsedProp;

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

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { createTheme } from '@mui/material/styles';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import {
+  AppProvider,
+  type Router,
+  type Navigation,
+} from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { Button } from '@mui/material';
+
+const NAVIGATION: Navigation = [
+  {
+    segment: 'dashboard',
+    title: 'Dashboard',
+    icon: <DashboardIcon />,
+  },
+  {
+    segment: 'orders',
+    title: 'Orders',
+    icon: <ShoppingCartIcon />,
+  },
+  {
+    segment: 'reports',
+    title: 'Reports',
+    icon: <BarChartIcon />,
+  },
+];
+
+const demoTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data-toolpad-color-scheme',
+  },
+  colorSchemes: { light: true, dark: true },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 600,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+});
+
+function DemoPageContent({
+  pathname,
+  toggleSidebar,
+}: {
+  pathname: string;
+  toggleSidebar: () => void;
+}) {
+  return (
+    <Box
+      sx={{
+        py: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        textAlign: 'center',
+      }}
+    >
+      <Typography>Dashboard content for {pathname}</Typography>
+      <Button onClick={() => toggleSidebar()}>Toggle Sidebar</Button>
+    </Box>
+  );
+}
+
+interface DemoProps {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  window?: () => Window;
+}
+
+export default function DashboardLayoutSidebarCollapsedProp(props: DemoProps) {
+  const { window } = props;
+
+  const [pathname, setPathname] = React.useState('/dashboard');
+  const [navigationMenuOpen, toggleSidebar] = React.useState<boolean>(true);
+  const router = React.useMemo<Router>(() => {
+    return {
+      pathname,
+      searchParams: new URLSearchParams(),
+      navigate: (path) => setPathname(String(path)),
+    };
+  }, [pathname]);
+
+  // Remove this const when copying and pasting into your project.
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  return (
+    <AppProvider
+      navigation={NAVIGATION}
+      router={router}
+      theme={demoTheme}
+      window={demoWindow}
+    >
+      <DashboardLayout navigationMenuOpen={navigationMenuOpen}>
+        <DemoPageContent
+          pathname={pathname}
+          toggleSidebar={() => toggleSidebar(!navigationMenuOpen)}
+        />
+      </DashboardLayout>
+    </AppProvider>
+  );
+}

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

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

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

@@ -126,6 +126,12 @@ The layout sidebar can be hidden if needed with the `hideNavigation` prop.
 
 {{"demo": "DashboardLayoutSidebarHidden.js", "height": 400, "iframe": true}}
 
+### Toggle sidebar
+
+The sidebar can be toggled if needed with the `navigationMenuOpen` prop.
+
+{{"demo": "DashboardLayoutSidebarCollapsedProp.js", "height": 400, "iframe": true}}
+
 ## Full-size content
 
 The layout content can take up the full available area with styles such as `flex: 1` or `height: 100%`.

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

@@ -11,6 +11,9 @@
     "defaultSidebarCollapsed": { "type": { "name": "bool" }, "default": "false" },
     "disableCollapsibleSidebar": { "type": { "name": "bool" }, "default": "false" },
     "hideNavigation": { "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,6 +12,15 @@
     "hideNavigation": {
       "description": "Whether the navigation bar and menu icon should be hidden"
     },
+    "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

@@ -410,4 +410,62 @@ describe('DashboardLayout', () => {
     // Ensure that main content is still rendered
     expect(screen.getByText('Hello world')).toBeTruthy();
   });
+
+  test('renders the sidebar in collapsed state when navigationMenuOpen is false', () => {
+    render(
+      <DashboardLayout navigationMenuOpen={false}>
+        <div>Test Content</div>
+      </DashboardLayout>,
+    );
+
+    // Expect that menu button has expand action
+    expect(screen.getAllByLabelText('Expand menu')).toBeTruthy();
+    expect(screen.queryByLabelText('Collapse menu')).toBeNull();
+  });
+
+  test('renders the sidebar in expanded state when navigationMenuOpen is true', () => {
+    render(
+      <DashboardLayout navigationMenuOpen>
+        <div>Test Content</div>
+      </DashboardLayout>,
+    );
+
+    expect(screen.getAllByLabelText('Collapse menu')).toBeTruthy();
+  });
+
+  test('calls onNavigationMenuOpen callback when navigationMenuOpen state changes to open', () => {
+    const mockToggleSidebar = vi.fn();
+    const { rerender } = render(
+      <DashboardLayout navigationMenuOpen={false} onNavigationMenuClose={mockToggleSidebar}>
+        <div>Test Content</div>
+      </DashboardLayout>,
+    );
+
+    // Trigger sidebar open action
+    rerender(
+      <DashboardLayout navigationMenuOpen onNavigationMenuClose={mockToggleSidebar}>
+        <div>Test Content</div>
+      </DashboardLayout>,
+    );
+
+    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 sidebar close action
+    rerender(
+      <DashboardLayout navigationMenuOpen={false} onNavigationMenuClose={mockToggleSidebar}>
+        <div>Test Content</div>
+      </DashboardLayout>,
+    );
+
+    expect(mockToggleSidebar).toHaveBeenCalledOnce();
+  });
 });