[DashboardLayout] Allow full customization for dashboard header

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

@@ -13,6 +13,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import type {} from '@mui/material/themeCssVarsAugmentation';
 import MenuIcon from '@mui/icons-material/Menu';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { BrandingContext, NavigationContext, WindowContext } from '../shared/context';
 import { Account, type AccountProps } from '../Account';
 import { DashboardSidebarSubNavigation } from './DashboardSidebarSubNavigation';
@@ -40,6 +41,7 @@ export interface DashboardLayoutSlotProps {
   toolbarActions?: {};
   toolbarAccount?: AccountProps;
   sidebarFooter?: SidebarFooterProps;
+  toolbar?: {};
 }
 
 export interface DashboardLayoutSlots {
@@ -58,11 +60,20 @@ export interface DashboardLayoutSlots {
    * @default Account
    */
   toolbarAccount?: React.JSXElementConstructor<AccountProps>;
+  /**
+   * Optional footer component used in the layout sidebar.
+   * @default null
+   */
+  toolbarCart?: React.JSXElementConstructor<{}>;
   /**
    * Optional footer component used in the layout sidebar.
    * @default null
    */
   sidebarFooter?: React.JSXElementConstructor<SidebarFooterProps>;
+  /**
+   * Optional toolbar component used in the layout header instead of the default.
+   */
+  toolbar?: React.JSXElementConstructor<{}>;
 }
 
 export interface DashboardLayoutProps {
@@ -260,6 +271,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
 
   const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions;
   const ToolbarAccountSlot = slots?.toolbarAccount ?? Account;
+  const ToolbarCartSlot = slots?.toolbarCart ?? React.Fragment;
   const SidebarFooterSlot = slots?.sidebarFooter ?? null;
 
   const getDrawerContent = React.useCallback(
@@ -385,10 +397,16 @@ function DashboardLayout(props: DashboardLayoutProps) {
                 <AppTitle branding={branding} {...slotProps?.appTitle} />
               )}
             </Stack>
-            <Stack direction="row" alignItems="center" spacing={1} sx={{ marginLeft: 'auto' }}>
-              <ToolbarActionsSlot {...slotProps?.toolbarActions} />
-              <ToolbarAccountSlot {...slotProps?.toolbarAccount} />
-            </Stack>
+            {/* show slots.toolbar if provided, else the stack */}
+            {slots?.toolbar ? (
+              <slots.toolbar {...slotProps?.toolbar} />
+            ) : (
+              <Stack direction="row" alignItems="center" spacing={1} sx={{ marginLeft: 'auto' }}>
+                <ToolbarActionsSlot {...slotProps?.toolbarActions} />
+                <ToolbarAccountSlot {...slotProps?.toolbarAccount} />
+                <ToolbarCartSlot />
+              </Stack>
+            )}
           </Stack>
         </Toolbar>
       </AppBar>

playground/nextjs-pages/.env.example

@@ -0,0 +1,7 @@
+# Force development mode
+NODE_ENV=development
+# Set up OAuth client: https://github.com/settings/developers
+GITHUB_CLIENT_ID=""
+# Read the docs: https://authjs.dev/guides/configuring-github
+GITHUB_CLIENT_SECRET=""
+# echo "AUTH_SECRET=$(openssl rand -base64 32)" >> .env.local

playground/nextjs-pages/package.json

@@ -3,6 +3,7 @@
   "version": "0.13.0",
   "private": true,
   "scripts": {
+    "predev": "[ ! -f .env.local ] && cp .env.example .env.local && echo \"AUTH_SECRET=\"$(openssl rand -base64 32)\"\" >> .env.local || echo '.env.local already exists'",
     "dev": "next dev",
     "lint": "next lint"
   },
@@ -22,4 +23,4 @@
     "react-dom": "^19.0.0",
     "zod": "3.24.2"
   }
-}
+}

playground/nextjs-pages/src/pages/_app.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRouter } from 'next/router';
 import { NextAppProvider } from '@toolpad/core/nextjs';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { DashboardLayout, ToolbarActions } from '@toolpad/core/DashboardLayout';
 import Head from 'next/head';
 import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
 import DashboardIcon from '@mui/icons-material/Dashboard';
@@ -12,6 +12,9 @@ import type { AppProps } from 'next/app';
 import type { Navigation } from '@toolpad/core/AppProvider';
 import { SessionProvider, signIn, signOut, useSession } from 'next-auth/react';
 import LinearProgress from '@mui/material/LinearProgress';
+import { Box, Button, IconButton, InputBase, Paper, Stack } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import { Account } from '@toolpad/core/Account';
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: React.ReactElement<any>) => React.ReactNode;
@@ -48,6 +51,69 @@ const AUTHENTICATION = {
   signOut,
 };
 
+function SearchBar() {
+  return (
+    <Paper
+      component="form"
+      elevation={0}
+      sx={{
+        alignItems: 'center',
+        width: { xl: 600, lg: 400, md: 'auto' },
+        height: 40,
+        px: 1.5,
+        borderRadius: 2,
+        backgroundColor: (theme) => theme.palette.action.hover,
+      }}
+    >
+      <IconButton type="submit" sx={{ p: '10px' }} aria-label="search" disableRipple>
+        <SearchIcon />
+      </IconButton>
+      <InputBase
+        sx={{ ml: 1, flex: 1 }}
+        placeholder="Search"
+        inputProps={{ 'aria-label': 'search' }}
+      />
+    </Paper>
+  );
+}
+
+function CustomToolbar() {
+  return (
+    <Stack
+      direction="row"
+      spacing={2}
+      alignItems="center"
+      justifyContent="space-between"
+      className="custom-toolbar"
+      sx={{
+        flexGrow: 1,
+        px: 2,
+        py: 1,
+      }}
+    >
+      <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}>
+        <Box sx={{ maxWidth: 400, width: '100%' }}>
+          <SearchBar />
+        </Box>
+      </Box>
+
+      <Stack direction="row" spacing={1} alignItems="center">
+        <ToolbarActions />
+        <Account />
+        <ToolbarCart />
+      </Stack>
+    </Stack>
+  );
+}
+
+function ToolbarCart() {
+  return (
+    <Button color="primary" aria-label="Shopping Cart">
+      <ShoppingCartIcon />
+    </Button>
+  );
+}
+
 function DefaultLayout({ page }: { page: React.ReactElement<any> }) {
   const router = useRouter();
   const { segments = [] } = router.query;
@@ -67,7 +133,7 @@ function DefaultLayout({ page }: { page: React.ReactElement<any> }) {
   }, [orderId, router.asPath]);
 
   return (
-    <DashboardLayout>
+    <DashboardLayout slots={{ toolbar: CustomToolbar }}>
       <PageContainer title={title}>{page}</PageContainer>
     </DashboardLayout>
   );

playground/nextjs/.env.example

@@ -0,0 +1,7 @@
+# Force development mode
+NODE_ENV=development
+# Set up OAuth client: https://github.com/settings/developers
+GITHUB_CLIENT_ID=""
+# Read the docs: https://authjs.dev/guides/configuring-github
+GITHUB_CLIENT_SECRET=""
+# echo "AUTH_SECRET=$(openssl rand -base64 32)" >> .env.local

playground/nextjs/package.json

@@ -3,6 +3,7 @@
   "version": "0.13.0",
   "private": true,
   "scripts": {
+    "predev": "[ ! -f .env.local ] && cp .env.example .env.local && echo \"AUTH_SECRET=\"$(openssl rand -base64 32)\"\" >> .env.local || echo '.env.local already exists'",
     "dev": "next dev",
     "lint": "next lint"
   },
@@ -23,4 +24,4 @@
     "react-dom": "^19.0.0",
     "zod": "3.24.2"
   }
-}
+}

playground/nextjs/src/app/(dashboard)/layout.tsx

@@ -1,5 +1,6 @@
 'use client';
-import * as React from 'react';
+
+import React from 'react';
 import { usePathname, useParams } from 'next/navigation';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
@@ -16,8 +17,11 @@ import {
   SignOutButton,
   AccountPreviewProps,
 } from '@toolpad/core/Account';
-import { DashboardLayout, SidebarFooterProps } from '@toolpad/core/DashboardLayout';
+import { DashboardLayout, SidebarFooterProps, ToolbarActions } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
+import { Box, Button, IconButton, InputBase, Paper } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 
 const accounts = [
   {
@@ -157,6 +161,69 @@ function SidebarFooterAccount({ mini }: SidebarFooterProps) {
   );
 }
 
+function SearchBar() {
+  return (
+    <Paper
+      component="form"
+      elevation={0}
+      sx={{
+        alignItems: 'center',
+        height: 40,
+        px: 1.5,
+        borderRadius: 2,
+        backgroundColor: (theme) => theme.palette.action.hover,
+        width: { xl: 600, lg: 400, md: 'auto' },
+      }}
+    >
+      <IconButton type="submit" sx={{ p: '10px' }} aria-label="search" disableRipple>
+        <SearchIcon />
+      </IconButton>
+      <InputBase
+        sx={{ ml: 1, flex: 1 }}
+        placeholder="Search"
+        inputProps={{ 'aria-label': 'search' }}
+      />
+    </Paper>
+  );
+}
+
+function CustomToolbar() {
+  return (
+    <Stack
+      direction="row"
+      spacing={2}
+      alignItems="center"
+      justifyContent="space-between"
+      className="custom-toolbar"
+      sx={{
+        flexGrow: 1,
+        px: 2,
+        py: 1,
+      }}
+    >
+      <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}>
+        <Box sx={{ maxWidth: 400, width: '100%' }}>
+          <SearchBar />
+        </Box>
+      </Box>
+
+      <Stack direction="row" spacing={1} alignItems="center">
+        <ToolbarActions />
+        <Account />
+        <ToolbarCart />
+      </Stack>
+    </Stack>
+  );
+}
+
+function ToolbarCart() {
+  return (
+    <Button color="primary" aria-label="Shopping Cart">
+      <ShoppingCartIcon />
+    </Button>
+  );
+}
+
 export default function DashboardPagesLayout(props: { children: React.ReactNode }) {
   const pathname = usePathname();
   const params = useParams();
@@ -176,7 +243,12 @@ export default function DashboardPagesLayout(props: { children: React.ReactNode
   }, [orderId, pathname]);
 
   return (
-    <DashboardLayout slots={{ sidebarFooter: SidebarFooterAccount, toolbarAccount: () => null }}>
+    <DashboardLayout
+      slots={{
+        sidebarFooter: SidebarFooterAccount,
+        toolbar: CustomToolbar,
+      }}
+    >
       <PageContainer title={title}>{props.children}</PageContainer>
     </DashboardLayout>
   );