[core] Allow changing the width of the drawer in dashboard layout com…

…ponent
mui · Oct 21, 2024 · 4fd1760 · 4fd1760
1 parent b78e92a
commit 4fd1760
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -89,6 +89,10 @@ export interface DashboardLayoutProps {
    * @default false
    */
   hideNavigation?: boolean;
+  /**
+   * The width in pixel of the sidebar when expanded, default value is 320.
+   */
+  sidebarExpandedWidth?: number;
   /**
    * The components used for each slot inside.
    * @default {}
@@ -121,6 +125,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
     disableCollapsibleSidebar = false,
     defaultSidebarCollapsed = false,
     hideNavigation = false,
+    sidebarExpandedWidth = 320,
     slots,
     slotProps,
     sx,
@@ -286,7 +291,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
 
   const getDrawerSharedSx = React.useCallback(
     (isMini: boolean, isTemporary: boolean) => {
-      const drawerWidth = isMini ? 64 : 320;
+      const drawerWidth = isMini ? 64 : sidebarExpandedWidth;
 
       return {
         width: drawerWidth,