From 4fd1760feebaf4c902c655560d98229d7d6d9b04 Mon Sep 17 00:00:00 2001
From: Garry Xiao <xz@etsoo.com>
Date: Tue, 22 Oct 2024 09:48:26 +1300
Subject: [PATCH] [core] Allow changing the width of the drawer in dashboard
 layout component

---
 .../toolpad-core/src/DashboardLayout/DashboardLayout.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
index d286dc0b477..fcab3ffbc4e 100644
--- 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,