Add simple sidebarFooter slot

mui · Oct 10, 2024 · c826bb4 · c826bb4
1 parent a0c12c9
commit c826bb4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/docs/pages/toolpad/core/api/dashboard-layout.json b/docs/pages/toolpad/core/api/dashboard-layout.json
@@ -6,14 +6,14 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ toolbarAccount?: { localeText?: { signInLabel: string, signOutLabel: string }, slotProps?: { iconButton?: object, signInButton?: object, signOutButton?: object }, slots?: { menuItems?: elementType, signInButton?: elementType, signOutButton?: elementType } }, toolbarActions?: object }"
+        "description": "{ sidebarFooter?: object, toolbarAccount?: { localeText?: { signInLabel: string, signOutLabel: string }, slotProps?: { iconButton?: object, signInButton?: object, signOutButton?: object }, slots?: { menuItems?: elementType, signInButton?: elementType, signOutButton?: elementType } }, toolbarActions?: object }"
       },
       "default": "{}"
     },
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ toolbarAccount?: elementType, toolbarActions?: elementType }"
+        "description": "{ sidebarFooter?: elementType, toolbarAccount?: elementType, toolbarActions?: elementType }"
       },
       "default": "{}",
       "additionalInfo": { "slotsApi": true }
@@ -43,6 +43,12 @@
       "description": "The toolbar account component used in the layout header.",
       "default": "Account",
       "class": null
+    },
+    {
+      "name": "sidebarFooter",
+      "description": "Optional footer component used in the layout sidebar.",
+      "default": "null",
+      "class": null
     }
   ],
   "classes": [],

diff --git a/docs/translations/api-docs/dashboard-layout/dashboard-layout.json b/docs/translations/api-docs/dashboard-layout/dashboard-layout.json
@@ -16,6 +16,7 @@
   },
   "classDescriptions": {},
   "slotDescriptions": {
+    "sidebarFooter": "Optional footer component used in the layout sidebar.",
     "toolbarAccount": "The toolbar account component used in the layout header.",
     "toolbarActions": "The toolbar actions component used in the layout header."
   }

diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -335,6 +335,11 @@ export interface DashboardLayoutSlots {
    * @default Account
    */
   toolbarAccount?: React.JSXElementConstructor<AccountProps>;
+  /**
+   * Optional footer component used in the layout sidebar.
+   * @default null
+   */
+  sidebarFooter?: React.JSXElementConstructor<{}>;
 }
 
 export interface DashboardLayoutProps {
@@ -364,6 +369,7 @@ export interface DashboardLayoutProps {
   slotProps?: {
     toolbarActions?: {};
     toolbarAccount?: AccountProps;
+    sidebarFooter?: {};
   };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -501,6 +507,10 @@ function DashboardLayout(props: DashboardLayoutProps) {
   const hasDrawerTransitions =
     isOverSmViewport && (disableCollapsibleSidebar || !isUnderMdViewport);
 
+  const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions;
+  const ToolbarAccountSlot = slots?.toolbarAccount ?? Account;
+  const SidebarFooterSlot = slots?.sidebarFooter ?? null;
+
   const getDrawerContent = React.useCallback(
     (isMini: boolean, ariaLabel: string) => (
       <React.Fragment>
@@ -509,6 +519,10 @@ function DashboardLayout(props: DashboardLayoutProps) {
           component="nav"
           aria-label={ariaLabel}
           sx={{
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
             overflow: 'auto',
             pt: navigation[0]?.kind === 'header' && !isMini ? 0 : 2,
             ...(hasDrawerTransitions
@@ -524,10 +538,18 @@ function DashboardLayout(props: DashboardLayoutProps) {
             hasDrawerTransitions={hasDrawerTransitions}
             selectedItemId={selectedItemIdRef.current}
           />
+          {SidebarFooterSlot ? <SidebarFooterSlot {...slotProps?.sidebarFooter} /> : null}
         </Box>
       </React.Fragment>
     ),
-    [handleNavigationLinkClick, hasDrawerTransitions, isNavigationFullyExpanded, navigation],
+    [
+      SidebarFooterSlot,
+      handleNavigationLinkClick,
+      hasDrawerTransitions,
+      isNavigationFullyExpanded,
+      navigation,
+      slotProps?.sidebarFooter,
+    ],
   );
 
   const getDrawerSharedSx = React.useCallback(
@@ -551,9 +573,6 @@ function DashboardLayout(props: DashboardLayoutProps) {
     [isNavigationExpanded],
   );
 
-  const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions;
-  const ToolbarAccountSlot = slots?.toolbarAccount ?? Account;
-
   const layoutRef = React.useRef<Element | null>(null);
 
   return (
@@ -728,6 +747,7 @@ DashboardLayout.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slotProps: PropTypes.shape({
+    sidebarFooter: PropTypes.object,
     toolbarAccount: PropTypes.shape({
       localeText: PropTypes.shape({
         signInLabel: PropTypes.string.isRequired,
@@ -751,6 +771,7 @@ DashboardLayout.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   slots: PropTypes.shape({
+    sidebarFooter: PropTypes.elementType,
     toolbarAccount: PropTypes.elementType,
     toolbarActions: PropTypes.elementType,
   }),