[DashboardLayout] Allow full customization for dashboard header

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.js

@@ -13,7 +13,7 @@ import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { DashboardLayout, ThemeSwitcher } from '@toolpad/core/DashboardLayout';
 import {
   Account,
   AccountPreview,
@@ -56,6 +56,14 @@ const demoTheme = createTheme({
   },
 });
 
+function CustomToolbarActions() {
+  return (
+    <Stack direction="row" alignItems="center">
+      <ThemeSwitcher />
+    </Stack>
+  );
+}
+
 function DemoPageContent({ pathname }) {
   return (
     <Box
@@ -281,7 +289,10 @@ function DashboardLayoutAccountSidebar(props) {
       >
         {/* preview-start */}
         <DashboardLayout
-          slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
+          slots={{
+            toolbarActions: CustomToolbarActions,
+            sidebarFooter: SidebarFooterAccount,
+          }}
         >
           <DemoPageContent pathname={pathname} />
         </DashboardLayout>

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx

@@ -12,7 +12,11 @@ import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { AppProvider } from '@toolpad/core/AppProvider';
-import { DashboardLayout, SidebarFooterProps } from '@toolpad/core/DashboardLayout';
+import {
+  DashboardLayout,
+  SidebarFooterProps,
+  ThemeSwitcher,
+} from '@toolpad/core/DashboardLayout';
 import {
   Account,
   AccountPreview,
@@ -56,6 +60,14 @@ const demoTheme = createTheme({
   },
 });
 
+function CustomToolbarActions() {
+  return (
+    <Stack direction="row" alignItems="center">
+      <ThemeSwitcher />
+    </Stack>
+  );
+}
+
 function DemoPageContent({ pathname }: { pathname: string }) {
   return (
     <Box
@@ -267,7 +279,10 @@ export default function DashboardLayoutAccountSidebar(props: DemoProps) {
       >
         {/* preview-start */}
         <DashboardLayout
-          slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
+          slots={{
+            toolbarActions: CustomToolbarActions,
+            sidebarFooter: SidebarFooterAccount,
+          }}
         >
           <DemoPageContent pathname={pathname} />
         </DashboardLayout>

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccountSidebar.tsx.preview

@@ -1,5 +1,8 @@
 <DashboardLayout
-  slots={{ toolbarAccount: () => null, sidebarFooter: SidebarFooterAccount }}
+  slots={{
+    toolbarActions: CustomToolbarActions,
+    sidebarFooter: SidebarFooterAccount,
+  }}
 >
   <DemoPageContent pathname={pathname} />
 </DashboardLayout>

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.js

@@ -8,6 +8,7 @@ import IconButton from '@mui/material/IconButton';
 import Popover from '@mui/material/Popover';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
+import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { createTheme, useColorScheme } from '@mui/material/styles';
@@ -16,6 +17,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { Account } from '@toolpad/core/Account';
 import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
@@ -131,6 +133,15 @@ function CustomThemeSwitcher() {
   );
 }
 
+function CustomToolbarActions() {
+  return (
+    <Stack direction="row" alignItems="center">
+      <CustomThemeSwitcher />
+      <Account />
+    </Stack>
+  );
+}
+
 function DashboardLayoutCustomThemeSwitcher(props) {
   const { window } = props;
 
@@ -151,7 +162,7 @@ function DashboardLayoutCustomThemeSwitcher(props) {
         {/* preview-start */}
         <DashboardLayout
           slots={{
-            toolbarActions: CustomThemeSwitcher,
+            toolbarActions: CustomToolbarActions,
           }}
         >
           <DemoPageContent pathname={router.pathname} />

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx

@@ -7,6 +7,7 @@ import IconButton from '@mui/material/IconButton';
 import Popover from '@mui/material/Popover';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
+import Stack from '@mui/material/Stack';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { createTheme, useColorScheme } from '@mui/material/styles';
@@ -15,6 +16,7 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { Account } from '@toolpad/core/Account';
 import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
@@ -126,6 +128,15 @@ function CustomThemeSwitcher() {
   );
 }
 
+function CustomToolbarActions() {
+  return (
+    <Stack direction="row" alignItems="center">
+      <CustomThemeSwitcher />
+      <Account />
+    </Stack>
+  );
+}
+
 interface DemoProps {
   /**
    * Injected by the documentation to work in an iframe.
@@ -154,7 +165,7 @@ export default function DashboardLayoutCustomThemeSwitcher(props: DemoProps) {
         {/* preview-start */}
         <DashboardLayout
           slots={{
-            toolbarActions: CustomThemeSwitcher,
+            toolbarActions: CustomToolbarActions,
           }}
         >
           <DemoPageContent pathname={router.pathname} />

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutCustomThemeSwitcher.tsx.preview

@@ -1,6 +1,6 @@
 <DashboardLayout
   slots={{
-    toolbarActions: CustomThemeSwitcher,
+    toolbarActions: CustomToolbarActions,
   }}
 >
   <DemoPageContent pathname={router.pathname} />

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js

@@ -15,6 +15,7 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import SearchIcon from '@mui/icons-material/Search';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout, ThemeSwitcher } from '@toolpad/core/DashboardLayout';
+import { Account } from '@toolpad/core/Account';
 import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
@@ -103,6 +104,7 @@ function ToolbarActionsSearch() {
         sx={{ display: { xs: 'none', md: 'inline-block' }, mr: 1 }}
       />
       <ThemeSwitcher />
+      <Account />
     </Stack>
   );
 }

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx

@@ -18,6 +18,7 @@ import {
   ThemeSwitcher,
   type SidebarFooterProps,
 } from '@toolpad/core/DashboardLayout';
+import { Account } from '@toolpad/core/Account';
 import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
@@ -102,6 +103,7 @@ function ToolbarActionsSearch() {
         sx={{ display: { xs: 'none', md: 'inline-block' }, mr: 1 }}
       />
       <ThemeSwitcher />
+      <Account />
     </Stack>
   );
 }

docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md

@@ -1,7 +1,7 @@
 ---
 productId: toolpad-core
 title: Dashboard Layout
-components: AppProvider, DashboardLayout, ToolbarActions, ThemeSwitcher, Account, DashboardSidebarPageItem
+components: AppProvider, DashboardLayout, DashboardHeader, ToolbarActions, ThemeSwitcher, Account, DashboardSidebarPageItem
 ---
 
 # Dashboard Layout
@@ -164,9 +164,11 @@ Some possibly useful slots:
 
 - `appTitle`: allows you to customize the app title section in the layout header.
 
-- `toolbarActions`: allows you to add new items to the toolbar in the header, such as a search bar or button. The default `ThemeSwitcher` component can be imported and used if you wish to do so, as shown in the example below.
+- `toolbarActions`: allows you to add new items to the toolbar in the header, such as a search bar or button. The default `ThemeSwitcher` and `Account` components can be imported and used if you wish to do so, as shown in the example below.
 
-- `sidebarFooter`: allows you to add footer content in the sidebar.
+- `header`: allows you to fully replace and customize the layout header.
+
+- `sidebarFooter`: allows you to add a footer to the sidebar.
 
 {{"demo": "DashboardLayoutSlots.js", "height": 400, "iframe": true}}
 

docs/data/toolpad/core/pagesApi.js

@@ -8,6 +8,7 @@ export default [
   { pathname: '/toolpad/core/api/crud' },
   { pathname: '/toolpad/core/api/crud-form' },
   { pathname: '/toolpad/core/api/crud-provider' },
+  { pathname: '/toolpad/core/api/dashboard-header' },
   { pathname: '/toolpad/core/api/dashboard-layout' },
   { pathname: '/toolpad/core/api/dashboard-sidebar-page-item' },
   { pathname: '/toolpad/core/api/dialogs-provider' },

docs/pages/toolpad/core/api/dashboard-header.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './dashboard-header.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs-toolpad/translations/api-docs/dashboard-header',
+    false,
+    /\.\/dashboard-header.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/toolpad/core/api/dashboard-header.json

@@ -0,0 +1,57 @@
+{
+  "props": {
+    "menuOpen": { "type": { "name": "bool" }, "required": true },
+    "onToggleMenu": { "type": { "name": "func" }, "required": true },
+    "branding": {
+      "type": {
+        "name": "shape",
+        "description": "{ homeUrl?: string, logo?: node, title?: string }"
+      },
+      "default": "null"
+    },
+    "hideMenuButton": { "type": { "name": "bool" }, "default": "false" },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ appTitle?: { branding?: { homeUrl?: string, logo?: node, title?: string } }, toolbarAccount?: { localeText?: object, slotProps?: { popover?: object, popoverContent?: object, preview?: object, signInButton?: object, signOutButton?: object }, slots?: { popover?: elementType, popoverContent?: elementType, preview?: elementType, signInButton?: elementType, signOutButton?: elementType } }, toolbarActions?: object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ appTitle?: elementType, toolbarAccount?: elementType, toolbarActions?: elementType }"
+      },
+      "default": "{}",
+      "additionalInfo": { "slotsApi": true }
+    }
+  },
+  "name": "DashboardHeader",
+  "imports": ["import { DashboardHeader } from '@toolpad/core/DashboardLayout';"],
+  "slots": [
+    {
+      "name": "appTitle",
+      "description": "The component used for the app title section.",
+      "default": "Link",
+      "class": null
+    },
+    {
+      "name": "toolbarActions",
+      "description": "The toolbar actions component to be used.",
+      "default": "ToolbarActions",
+      "class": null
+    },
+    {
+      "name": "toolbarAccount",
+      "description": "The toolbar account component to be used.",
+      "default": "Account",
+      "class": null
+    }
+  ],
+  "classes": [],
+  "muiName": "DashboardHeader",
+  "filename": "/packages/toolpad-core/src/DashboardLayout/DashboardHeader.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/toolpad/core/react-dashboard-layout/\">Dashboard Layout</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/toolpad/core/api/dashboard-layout.json

@@ -34,14 +34,14 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ appTitle?: { branding?: { homeUrl?: string, logo?: node, title?: string } }, sidebarFooter?: { mini: bool }, toolbarAccount?: { localeText?: object, slotProps?: { popover?: object, popoverContent?: object, preview?: object, signInButton?: object, signOutButton?: object }, slots?: { popover?: elementType, popoverContent?: elementType, preview?: elementType, signInButton?: elementType, signOutButton?: elementType } }, toolbarActions?: object }"
+        "description": "{ appTitle?: { branding?: { homeUrl?: string, logo?: node, title?: string } }, header?: { branding?: { homeUrl?: string, logo?: node, title?: string }, hideMenuButton?: bool, menuOpen: bool, onToggleMenu: func, slotProps?: { appTitle?: object, toolbarAccount?: object, toolbarActions?: object }, slots?: { appTitle?: elementType, toolbarAccount?: elementType, toolbarActions?: elementType } }, sidebarFooter?: { mini: bool }, toolbarAccount?: { localeText?: object, slotProps?: { popover?: object, popoverContent?: object, preview?: object, signInButton?: object, signOutButton?: object }, slots?: { popover?: elementType, popoverContent?: elementType, preview?: elementType, signInButton?: elementType, signOutButton?: elementType } }, toolbarActions?: object }"
       },
       "default": "{}"
     },
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ appTitle?: elementType, sidebarFooter?: elementType, toolbarAccount?: elementType, toolbarActions?: elementType }"
+        "description": "{ appTitle?: elementType, header?: elementType, sidebarFooter?: elementType, toolbarAccount?: elementType, toolbarActions?: elementType }"
       },
       "default": "{}",
       "additionalInfo": { "slotsApi": true }
@@ -78,6 +78,12 @@
       "default": "Account",
       "class": null
     },
+    {
+      "name": "header",
+      "description": "The component used for the layout header.",
+      "default": "DashboardHeader",
+      "class": null
+    },
     {
       "name": "sidebarFooter",
       "description": "Optional footer component used in the layout sidebar.",

docs/translations/api-docs/dashboard-header/dashboard-header.json

@@ -0,0 +1,19 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "branding": { "description": "Branding options for the header." },
+    "hideMenuButton": { "description": "Whether the menu icon should always be hidden." },
+    "menuOpen": {
+      "description": "If <code>true</code>, show menu button as if menu is expanded, otherwise show it as if menu is collapsed."
+    },
+    "onToggleMenu": { "description": "Callback fired when the menu button is clicked." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." }
+  },
+  "classDescriptions": {},
+  "slotDescriptions": {
+    "appTitle": "The component used for the app title section.",
+    "toolbarAccount": "The toolbar account component to be used.",
+    "toolbarActions": "The toolbar actions component to be used."
+  }
+}

docs/translations/api-docs/dashboard-layout/dashboard-layout.json

@@ -26,6 +26,7 @@
   "classDescriptions": {},
   "slotDescriptions": {
     "appTitle": "The component used for the app title section in the layout header.",
+    "header": "The component used for the layout header.",
     "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."