[DashboardLayout] Allow full customization for dashboard header

[rkristelijn]

Adds ability to ship your own toolbar, this gives more flexibility, therefore: you can ship your own things, this may as well be the tools Toolpad already provides, such as the account, toolbar and any custom stuff, like a cart, or a search bar, in any given order.

Please let me know if this is in line with the roadmap, or how I can polish my merge request to approval.

• I've read and followed the contributing guide on how to create great pull requests.
• I've updated the relevant documentation for any new or updated feature.
• I've linked relevant GitHub issue with "Closes Feature request: more control on topbar slots #4662".
• I've added a visual demonstration in the form of a screenshot or video.

Also deprecates toolbarAccount slot by moving it inside toolbarActions slot.

https://deploy-preview-4820--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/

[apedroferreira]

Thanks a lot for your contribution!
Added some suggestions that will probably help simplify everything and align with what we think would be the best way to do this.

[rkristelijn]

@apedroferreira I lifted the ability to override to the full toolbar and introduced left, mid and right props too. I'm unsure if i should extend:

export interface DashboardLayoutSlotProps {
  appTitle?: AppTitleProps;
  toolbarActions?: {};
  toolbarAccount?: AccountProps;
  sidebarFooter?: SidebarFooterProps;
  toolbar?: {}; // needed?
}

And I will dive into updating the docs once you approved of this direction/change. Thanks for your feedback!

[rkristelijn]

I think it is good enough now;

considering these helper functions:

function Middle({ menuIcon }: ToolbarProps) {
  return (
    <Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
      {menuIcon}
      <ToolbarActions />
    </Stack>
  );
}

function Right() {
  return (
    <Stack direction="row" spacing={2} alignItems="center">
      <Account />

      <Link href="/orders">
        <Button color="primary" aria-label="Cart">
          <ShoppingCart />
        </Button>
      </Link>
    </Stack>
  );
}

function Left() {
  return (
    <Stack direction="row" spacing={2} alignItems="center">
      <AppTitle />
    </Stack>
  );
}

export default function DashboardPagesLayout(props: { children: React.ReactNode }) {
  const pathname = usePathname();
  const params = useParams();
  const [orderId] = params.segments ?? [];

  const title = React.useMemo(() => {
    if (pathname === '/orders/new') {
      return 'New Order';
    }
    if (orderId && pathname.includes('/edit')) {
      return `Order ${orderId} - Edit`;
    }
    if (orderId) {
      return `Order ${orderId}`;
    }
    return undefined;
  }, [orderId, pathname]);

  return (
    <DashboardLayout
      slots={{
        sidebarFooter: SidebarFooterAccount,
        toolbarLeft: () => <div />,
        toolbarRight: () => <div />,
        toolbarMiddle: Middle,
      }}
    >
      <PageContainer title={title}>{props.children}</PageContainer>
    </DashboardLayout>
  );
}

renders as:

<DashboardLayout
      slots={{
        sidebarFooter: SidebarFooterAccount,
        toolbarMiddle: Middle,
        toolbarRight: Right,
        toolbarLeft: Left,
      }}
    >
      <PageContainer title={title}>{props.children}</PageContainer>
    </DashboardLayout>

renders as:

<DashboardLayout
      slots={{
        sidebarFooter: SidebarFooterAccount,
        toolbar: Right,
      }}
    >
      <PageContainer title={title}>{props.children}</PageContainer>
    </DashboardLayout>

renders as:

[apedroferreira]

@apedroferreira I lifted the ability to override to the full toolbar and introduced left, mid and right props too. I'm unsure if i should extend:

export interface DashboardLayoutSlotProps {
  appTitle?: AppTitleProps;
  toolbarActions?: {};
  toolbarAccount?: AccountProps;
  sidebarFooter?: SidebarFooterProps;
  toolbar?: {}; // needed?
}

And I will dive into updating the docs once you approved of this direction/change. Thanks for your feedback!

I would really just stick to a single toolbarActions slot as proposed, and keep the changes minimal.

[rkristelijn]

@apedroferreira Is it good to go now? I don't know how to apply a label

[rkristelijn]

@apedroferreira can I get an update? 🙏

[rkristelijn]

@apedroferreira I think I solved all the suggestions, can you please add your changes on top however you see beneficial. To be frank I'm starting to lose overview. Would be happy to see this change in next release. Don't think it will break anything, it is just a new feature

[apedroferreira]

@apedroferreira I think I solved all the suggestions, can you please add your changes on top however you see beneficial. To be frank I'm starting to lose overview. Would be happy to see this change in next release. Don't think it will break anything, it is just a new feature

Hey, thanks for your patience. Will do it really soon so we can merge!

[mui-bot]

Netlify deploy preview

https://deploy-preview-4820--mui-toolpad-docs.netlify.app/

Generated by 🚫 dangerJS against 89fcb59

[apedroferreira]

Took more work than expected as the header component in the layout needed some refactoring for this.

This header slot should do for now for fully customizing the layout header, and later we can migrate it to a composition API and adjust slots according to that.

Just tagging some more team members in case they have any feedback. As this change is a bit more extensive than originally intended not sure if it will be in time for the next release, or the one after. We'll try to have it live as soon as possible in any case.

[rkristelijn]

＼ ٩( ᐛ )و /／ ʕ•̫͡•ʕ̫͡ʕ•͓͡•ʔ-̫͡-ʕ•̫͡•ʔ̫͡ʔ-̫͡-ʔ