@toolpad/core/esm/DashboardLayout/DashboardLayout.d.ts

Dashboard framework powered by Material UI.

import * as React from 'react';
import { SxProps } from '@mui/material/styles';
import type { Branding, Navigation, NavigationPageItem } from "../AppProvider/index.js";
import type { AccountProps } from "../Account/index.js";
import { type DashboardHeaderProps, type DashboardHeaderSlotProps } from "./DashboardHeader.js";
export interface SidebarFooterProps {
  mini: boolean;
}
export interface DashboardLayoutSlotProps {
  appTitle?: DashboardHeaderSlotProps['appTitle'];
  toolbarActions?: DashboardHeaderSlotProps['toolbarActions'];
  toolbarAccount?: DashboardHeaderSlotProps['toolbarAccount'];
  sidebarFooter?: SidebarFooterProps;
  header?: DashboardHeaderProps;
}
export interface DashboardLayoutSlots {
  /**
   * The component used for the app title section in the layout header.
   * @default Link
   * @see [DashboardLayout#slots](https://mui.com/toolpad/core/react-dashboard-layout/#slots)
   */
  appTitle?: React.ElementType;
  /**
   * The toolbar actions component used in the layout header.
   * @default ToolbarActions
   * @see [DashboardLayout#slots](https://mui.com/toolpad/core/react-dashboard-layout/#slots)
   */
  toolbarActions?: React.JSXElementConstructor<{}>;
  /**
   * The toolbar account component used in the layout header.
   * @default Account
   * @deprecated Place your custom component on the right in the `toolbarActions` slot instead.
   * @see [DashboardLayout#slots](https://mui.com/toolpad/core/react-dashboard-layout/#slots)
   */
  toolbarAccount?: React.JSXElementConstructor<AccountProps>;
  /**
   * The component used for the layout header.
   * @default DashboardHeader
   */
  header?: React.JSXElementConstructor<DashboardHeaderProps>;
  /**
   * Optional footer component used in the layout sidebar.
   * @default null
   */
  sidebarFooter?: React.JSXElementConstructor<SidebarFooterProps>;
}
export interface DashboardLayoutProps {
  /**
   * The content of the dashboard.
   */
  children: React.ReactNode;
  /**
   * Branding options for the dashboard.
   * @default null
   */
  branding?: Branding | null;
  /**
   * Navigation definition for the dashboard. [Find out more](https://mui.com/toolpad/core/react-dashboard-layout/#navigation).
   * @default []
   * @deprecated Set the navigation in the [AppProvider](https://mui.com/toolpad/core/react-app-provider/#navigation) instead.
   */
  navigation?: Navigation;
  /**
   * Whether the sidebar should start collapsed in desktop size screens.
   * @default false
   */
  defaultSidebarCollapsed?: boolean;
  /**
   * Whether the sidebar should not be collapsible to a mini variant in desktop and tablet viewports.
   * @default false
   */
  disableCollapsibleSidebar?: boolean;
  /**
   * Whether the navigation bar and menu icon should be hidden.
   * @default false
   */
  hideNavigation?: boolean;
  /**
   * Width of the sidebar when expanded.
   * @default 320
   */
  sidebarExpandedWidth?: number | string;
  /**
   * Render each page item.
   *
   * @param {NavigationPageItem} item
   * @param {{ mini: boolean }} params
   * @returns {ReactNode}
   */
  renderPageItem?: (item: NavigationPageItem, params: {
    mini: boolean;
  }) => React.ReactNode;
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots?: DashboardLayoutSlots;
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps?: DashboardLayoutSlotProps;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps;
}
/**
 *
 * Demos:
 *
 * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
 *
 * API:
 *
 * - [DashboardLayout API](https://mui.com/toolpad/core/api/dashboard-layout)
 */
declare function DashboardLayout(props: DashboardLayoutProps): React.JSX.Element;
declare namespace DashboardLayout {
  var propTypes: any;
}
export { DashboardLayout };