Add branding prop to DashboardLayout, adjust logo spacing

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

@@ -1,6 +1,10 @@
 {
   "props": {
     "children": { "type": { "name": "node" }, "required": true },
+    "branding": {
+      "type": { "name": "shape", "description": "{ logo?: node, title?: string }" },
+      "default": "null"
+    },
     "defaultSidebarCollapsed": { "type": { "name": "bool" }, "default": "false" },
     "disableCollapsibleSidebar": { "type": { "name": "bool" }, "default": "false" },
     "hideNavigation": { "type": { "name": "bool" }, "default": "false" },

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

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "branding": { "description": "Branding options for the dashboard." },
     "children": { "description": "The content of the dashboard." },
     "defaultSidebarCollapsed": {
       "description": "Whether the sidebar should start collapsed in desktop size screens."

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

@@ -22,6 +22,7 @@ import { DashboardSidebarSubNavigation } from './DashboardSidebarSubNavigation';
 import { ToolbarActions } from './ToolbarActions';
 import { ToolpadLogo } from './ToolpadLogo';
 import { getDrawerSxTransitionMixin, getDrawerWidthTransitionMixin } from './utils';
+import { Branding } from '../AppProvider';
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
   borderWidth: 0,
@@ -73,6 +74,11 @@ export interface DashboardLayoutProps {
    * The content of the dashboard.
    */
   children: React.ReactNode;
+  /**
+   * Branding options for the dashboard.
+   * @default null
+   */
+  branding?: Branding | null;
   /**
    * Whether the sidebar should not be collapsible to a mini variant in desktop and tablet viewports.
    * @default false
@@ -122,6 +128,7 @@ export interface DashboardLayoutProps {
 function DashboardLayout(props: DashboardLayoutProps) {
   const {
     children,
+    branding: brandingProp,
     disableCollapsibleSidebar = false,
     defaultSidebarCollapsed = false,
     hideNavigation = false,
@@ -133,25 +140,27 @@ function DashboardLayout(props: DashboardLayoutProps) {
 
   const theme = useTheme();
 
-  const branding = React.useContext(BrandingContext);
-  const navigation = React.useContext(NavigationContext);
-  const appWindow = React.useContext(WindowContext);
+  const brandingContext = React.useContext(BrandingContext);
+  const navigationContext = React.useContext(NavigationContext);
+  const appWindowContext = React.useContext(WindowContext);
   const applicationTitle = useApplicationTitle();
 
+  const branding = brandingProp ?? brandingContext;
+
   const [isDesktopNavigationExpanded, setIsDesktopNavigationExpanded] =
     React.useState(!defaultSidebarCollapsed);
   const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] = React.useState(false);
 
   const isUnderMdViewport = useMediaQuery(
     theme.breakpoints.down('md'),
-    appWindow && {
-      matchMedia: appWindow.matchMedia,
+    appWindowContext && {
+      matchMedia: appWindowContext.matchMedia,
     },
   );
   const isOverSmViewport = useMediaQuery(
     theme.breakpoints.up('sm'),
-    appWindow && {
-      matchMedia: appWindow.matchMedia,
+    appWindowContext && {
+      matchMedia: appWindowContext.matchMedia,
     },
   );
 
@@ -207,10 +216,10 @@ function DashboardLayout(props: DashboardLayoutProps) {
 
   // If useEffect was used, the reset would also happen on the client render after SSR which we don't need
   React.useMemo(() => {
-    if (navigation) {
+    if (navigationContext) {
       selectedItemIdRef.current = '';
     }
-  }, [navigation]);
+  }, [navigationContext]);
 
   const isDesktopMini = !disableCollapsibleSidebar && !isDesktopNavigationExpanded;
   const isMobileMini = !disableCollapsibleSidebar && !isMobileNavigationExpanded;
@@ -259,14 +268,14 @@ function DashboardLayout(props: DashboardLayoutProps) {
             flexDirection: 'column',
             justifyContent: 'space-between',
             overflow: 'auto',
-            pt: navigation[0]?.kind === 'header' && !isMini ? 0 : 2,
+            pt: navigationContext[0]?.kind === 'header' && !isMini ? 0 : 2,
             ...(hasDrawerTransitions
               ? getDrawerSxTransitionMixin(isNavigationFullyExpanded, 'padding')
               : {}),
           }}
         >
           <DashboardSidebarSubNavigation
-            subNavigation={navigation}
+            subNavigation={navigationContext}
             onLinkClick={handleNavigationLinkClick}
             isMini={isMini}
             isFullyExpanded={isNavigationFullyExpanded}
@@ -284,7 +293,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
       handleNavigationLinkClick,
       hasDrawerTransitions,
       isNavigationFullyExpanded,
-      navigation,
+      navigationContext,
       slotProps?.sidebarFooter,
     ],
   );
@@ -365,7 +374,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
                     sx={{
                       color: (theme.vars ?? theme).palette.primary.main,
                       fontWeight: '700',
-                      ml: 0.5,
+                      ml: 1,
                       whiteSpace: 'nowrap',
                     }}
                   >
@@ -458,6 +467,14 @@ DashboardLayout.propTypes /* remove-proptypes */ = {
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
   // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Branding options for the dashboard.
+   * @default null
+   */
+  branding: PropTypes.shape({
+    logo: PropTypes.node,
+    title: PropTypes.string,
+  }),
   /**
    * The content of the dashboard.
    */