[DashboardLayout] Allow full customization for dashboard header (#4820)

Signed-off-by: Remi Kristelijn <rkristelijn@gmail.com>
Co-authored-by: Bharat Kashyap <bharatkashyap@outlook.com>
Co-authored-by: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>

Author: 3 people

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' },