[DashboardLayout] Add homeUrl to branding and appTitle slot

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

@@ -73,7 +73,7 @@ function DashboardLayoutBranding(props) {
       branding={{
         logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
         title: 'MUI',
-        homeUrl: 'https://mui.com/toolpad/core/introduction',
+        homeUrl: '/toolpad/core/introduction',
       }}
       router={router}
       theme={demoTheme}

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

@@ -76,7 +76,7 @@ export default function DashboardLayoutBranding(props: DemoProps) {
       branding={{
         logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
         title: 'MUI',
-        homeUrl: 'https://mui.com/toolpad/core/introduction',
+        homeUrl: '/toolpad/core/introduction',
       }}
       router={router}
       theme={demoTheme}

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

@@ -3,7 +3,7 @@
   branding={{
     logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
     title: 'MUI',
-    homeUrl: 'https://mui.com/toolpad/core/introduction',
+    homeUrl: '/toolpad/core/introduction',
   }}
   router={router}
   theme={demoTheme}

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

@@ -3,12 +3,14 @@ import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+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';
@@ -121,19 +123,13 @@ SidebarFooter.propTypes = {
 
 function CustomAppTitle() {
   return (
-    <Stack direction="column" alignItems="center">
-      <img width={24} src="https://mui.com/static/logo.svg" alt="Logo" />
-      <Typography
-        variant="caption"
-        sx={{
-          fontWeight: '300',
-          ml: 1,
-          textTransform: 'capitalize',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        My Co.
-      </Typography>
+    <Stack direction="row" alignItems="center" spacing={2}>
+      <DashboardIcon color="primary" />
+      <Typography variant="h6">My App</Typography>
+      <Chip size="small" label="BETA" color="info" />
+      <Tooltip title="Connected to production">
+        <CheckCircleIcon color="success" fontSize="small" />
+      </Tooltip>
     </Stack>
   );
 }
@@ -155,9 +151,9 @@ function DashboardLayoutSlots(props) {
     >
       <DashboardLayout
         slots={{
+          appTitle: CustomAppTitle,
           toolbarActions: ToolbarActionsSearch,
           sidebarFooter: SidebarFooter,
-          appTitle: CustomAppTitle,
         }}
       >
         <DemoPageContent pathname={router.pathname} />

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

@@ -2,12 +2,14 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import SearchIcon from '@mui/icons-material/Search';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import {
@@ -116,19 +118,13 @@ function SidebarFooter({ mini }: SidebarFooterProps) {
 
 function CustomAppTitle() {
   return (
-    <Stack direction="column" alignItems="center">
-      <img width={24} src="https://mui.com/static/logo.svg" alt="Logo" />
-      <Typography
-        variant="caption"
-        sx={{
-          fontWeight: '300',
-          ml: 1,
-          textTransform: 'capitalize',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        My Co.
-      </Typography>
+    <Stack direction="row" alignItems="center" spacing={2}>
+      <DashboardIcon color="primary" />
+      <Typography variant="h6">My App</Typography>
+      <Chip size="small" label="BETA" color="info" />
+      <Tooltip title="Connected to production">
+        <CheckCircleIcon color="success" fontSize="small" />
+      </Tooltip>
     </Stack>
   );
 }
@@ -158,9 +154,9 @@ export default function DashboardLayoutSlots(props: DemoProps) {
     >
       <DashboardLayout
         slots={{
+          appTitle: CustomAppTitle,
           toolbarActions: ToolbarActionsSearch,
           sidebarFooter: SidebarFooter,
-          appTitle: CustomAppTitle,
         }}
       >
         <DemoPageContent pathname={router.pathname} />

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

@@ -1,8 +1,8 @@
 <DashboardLayout
   slots={{
+    appTitle: CustomAppTitle,
     toolbarActions: ToolbarActionsSearch,
     sidebarFooter: SidebarFooter,
-    appTitle: CustomAppTitle,
   }}
 >
   <DemoPageContent pathname={router.pathname} />

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

@@ -37,7 +37,7 @@ This can be done via the `branding` prop in the [AppProvider](https://mui.com/to
 {{"demo": "DashboardLayoutBranding.js", "height": 400, "iframe": true}}
 
 :::info
-You may also override the default branding components by passing in your own component to the `branding` slot, as described in the [Slots section](#slots).
+You may also override the default branding components by passing in your own component to the `appTitle` slot, as shown in the [Slots section](#slots).
 :::
 
 ## Navigation
@@ -149,12 +149,12 @@ The use of an `iframe` may cause some spacing issues in the following demo.
 Certain areas of the layout can be replaced with custom components by using the `slots` and `slotProps` props.
 Some possibly useful slots:
 
+- `appTitle`: allows you to cutomize 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.
 
 - `sidebarFooter`: allows you to add footer content in the sidebar.
 
-- `branding`: allows you to pass in your own component in the branding section.
-
 {{"demo": "DashboardLayoutSlots.js", "height": 400, "iframe": true}}
 
 ### Examples

docs/data/toolpad/core/components/page-container/ActionsPageContainer.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useDemoRouter } from '@toolpad/core/internal';
 import { PageContainer, PageContainerToolbar } from '@toolpad/core/PageContainer';
 import { AppProvider } from '@toolpad/core/AppProvider';
@@ -19,12 +20,14 @@ const NAVIGATION = [
 ];
 
 // preview-start
-function PageToolbar() {
+function PageToolbar({ status }) {
   return (
     <PageContainerToolbar>
+      <p>Current status: {status}</p>
       <Button startIcon={<FileDownloadIcon />} color="inherit">
         Export
       </Button>
+
       <DateRangePicker
         sx={{ width: 220 }}
         defaultValue={[dayjs(), dayjs().add(14, 'day')]}
@@ -37,16 +40,25 @@ function PageToolbar() {
 }
 // preview-end
 
+PageToolbar.propTypes = {
+  status: PropTypes.string.isRequired,
+};
+
 export default function ActionsPageContainer() {
   const router = useDemoRouter();
+  const status = 'supesh';
 
+  const PageToolbarComponent = React.useCallback(
+    () => <PageToolbar status={status} />,
+    [status],
+  );
   const theme = useTheme();
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
         <Paper sx={{ width: '100%' }}>
-          <PageContainer slots={{ toolbar: PageToolbar }}>
+          <PageContainer slots={{ toolbar: PageToolbarComponent }}>
             <PageContent />
           </PageContainer>
         </Paper>

docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx

@@ -19,12 +19,14 @@ const NAVIGATION = [
 ];
 
 // preview-start
-function PageToolbar() {
+function PageToolbar({ status }: { status: string }) {
   return (
     <PageContainerToolbar>
+      <p>Current status: {status}</p>
       <Button startIcon={<FileDownloadIcon />} color="inherit">
         Export
       </Button>
+
       <DateRangePicker
         sx={{ width: 220 }}
         defaultValue={[dayjs(), dayjs().add(14, 'day')]}
@@ -39,14 +41,19 @@ function PageToolbar() {
 
 export default function ActionsPageContainer() {
   const router = useDemoRouter();
+  const status = 'supesh';
 
+  const PageToolbarComponent = React.useCallback(
+    () => <PageToolbar status={status} />,
+    [status],
+  );
   const theme = useTheme();
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <AppProvider navigation={NAVIGATION} router={router} theme={theme}>
         <Paper sx={{ width: '100%' }}>
-          <PageContainer slots={{ toolbar: PageToolbar }}>
+          <PageContainer slots={{ toolbar: PageToolbarComponent }}>
             <PageContent />
           </PageContainer>
         </Paper>

docs/data/toolpad/core/components/page-container/ActionsPageContainer.tsx.preview

@@ -1,9 +1,11 @@
-function PageToolbar() {
+function PageToolbar({ status }: { status: string }) {
   return (
     <PageContainerToolbar>
+      <p>Current status: {status}</p>
       <Button startIcon={<FileDownloadIcon />} color="inherit">
         Export
       </Button>
+
       <DateRangePicker
         sx={{ width: 220 }}
         defaultValue={[dayjs(), dayjs().add(14, 'day')]}

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

@@ -18,7 +18,7 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ sidebarFooter?: { mini: bool }, toolbarAccount?: { localeText?: { iconButtonAriaLabel?: string, signInLabel?: string, signOutLabel?: string }, 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 } }, sidebarFooter?: { mini: bool }, toolbarAccount?: { localeText?: { iconButtonAriaLabel?: string, signInLabel?: string, signOutLabel?: string }, 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": "{}"
     },
@@ -44,6 +44,12 @@
     "import { DashboardLayout } from '@toolpad/core';"
   ],
   "slots": [
+    {
+      "name": "appTitle",
+      "description": "The component used for the app title section in the layout header.",
+      "default": "Link",
+      "class": null
+    },
     {
       "name": "toolbarActions",
       "description": "The toolbar actions component used in the layout header.",
@@ -61,12 +67,6 @@
       "description": "Optional footer component used in the layout sidebar.",
       "default": "null",
       "class": null
-    },
-    {
-      "name": "appTitle",
-      "description": "The component used for the app title section in the layout header.",
-      "default": "Link",
-      "class": null
     }
   ],
   "classes": [],

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

@@ -15,17 +15,21 @@ const LogoContainer = styled('div')({
   },
 });
 
+export interface AppTitleProps {
+  branding?: Branding;
+}
+
 /**
  * @ignore - internal component.
  */
-export function AppTitleComponent(props: Branding) {
+export function AppTitle(props: AppTitleProps) {
   const theme = useTheme();
   const defaultTitle = useApplicationTitle();
-  const title = props?.title ?? defaultTitle;
+  const title = props?.branding?.title ?? defaultTitle;
   return (
-    <Link href={props?.homeUrl ?? '/'} style={{ color: 'red', textDecoration: 'none' }}>
+    <Link href={props?.branding?.homeUrl ?? '/'} style={{ textDecoration: 'none' }}>
       <Stack direction="row" alignItems="center">
-        <LogoContainer>{props?.logo ?? <ToolpadLogo size={40} />}</LogoContainer>
+        <LogoContainer>{props?.branding?.logo ?? <ToolpadLogo size={40} />}</LogoContainer>
         <Typography
           variant="h6"
           sx={{