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

#4296) Co-authored-by: Pedro Ferreira <[email protected]>
mui · Oct 25, 2024 · 1ef74f0 · 1ef74f0
1 parent b126c45
commit 1ef74f0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/docs/pages/toolpad/core/api/dashboard-layout.json b/docs/pages/toolpad/core/api/dashboard-layout.json
@@ -4,6 +4,10 @@
     "defaultSidebarCollapsed": { "type": { "name": "bool" }, "default": "false" },
     "disableCollapsibleSidebar": { "type": { "name": "bool" }, "default": "false" },
     "hideNavigation": { "type": { "name": "bool" }, "default": "false" },
+    "sidebarExpandedWidth": {
+      "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
+      "default": "320"
+    },
     "slotProps": {
       "type": {
         "name": "shape",

diff --git a/docs/translations/api-docs/dashboard-layout/dashboard-layout.json b/docs/translations/api-docs/dashboard-layout/dashboard-layout.json
@@ -11,6 +11,7 @@
     "hideNavigation": {
       "description": "Whether the navigation bar and menu icon should be hidden"
     },
+    "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." },
     "sx": {

diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -89,6 +89,11 @@ export interface DashboardLayoutProps {
    * @default false
    */
   hideNavigation?: boolean;
+  /**
+   * Width of the sidebar when expanded.
+   * @default 320
+   */
+  sidebarExpandedWidth?: number | string;
   /**
    * The components used for each slot inside.
    * @default {}
@@ -121,6 +126,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
     disableCollapsibleSidebar = false,
     defaultSidebarCollapsed = false,
     hideNavigation = false,
+    sidebarExpandedWidth = 320,
     slots,
     slotProps,
     sx,
@@ -286,7 +292,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,
@@ -302,7 +308,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
         },
       };
     },
-    [isNavigationExpanded],
+    [isNavigationExpanded, sidebarExpandedWidth],
   );
 
   const layoutRef = React.useRef<Element | null>(null);
@@ -469,6 +475,11 @@ DashboardLayout.propTypes /* remove-proptypes */ = {
    * @default false
    */
   hideNavigation: PropTypes.bool,
+  /**
+   * Width of the sidebar when expanded.
+   * @default 320
+   */
+  sidebarExpandedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * The props used for each slot inside.
    * @default {}